Redux Form 7.0 数据交互篇

Redux Form 是一个 React 表单库，它可以帮助我们管理表单的状态，简化表单的处理流程。在 Redux Form 7.0 版本中，数据交互方面有了一些新的改进，本文将详细介绍这些改进并提供示例代码。

数据交互

在表单中，我们通常需要与服务器进行数据交互，例如提交表单数据、获取表单数据等。Redux Form 7.0 版本中新增了一些 API，可以方便地进行数据交互。

onSubmit

onSubmit 是 Redux Form 中一个非常重要的 API，它可以在表单提交时触发。我们可以在 onSubmit 中进行数据交互操作，例如提交表单数据到服务器。

import { Field, reduxForm } from 'redux-form'

const submit = (values) => {
  // 调用接口提交表单数据
  console.log(values)
}

const MyForm = (props) => {
  const { handleSubmit } = props

  return (
    <form onSubmit={handleSubmit(submit)}>
      <Field name="username" component="input" type="text" />
      <Field name="password" component="input" type="password" />
      <button type="submit">提交</button>
    </form>
  )
}

export default reduxForm({
  form: 'myForm'
})(MyForm)

上面的代码中，我们定义了一个 submit 函数，它会在表单提交时被调用。我们可以在这个函数中调用接口，将表单数据提交到服务器。

initialValues

initialValues 可以用来设置表单的默认值。在 Redux Form 7.0 版本中，我们可以使用 initialValues 来获取服务器端的表单数据。

import { Field, reduxForm } from 'redux-form'

const MyForm = (props) => {
  const { handleSubmit, initialValues } = props

  return (
    <form onSubmit={handleSubmit}>
      <Field name="username" component="input" type="text" />
      <Field name="password" component="input" type="password" />
      <button type="submit">提交</button>
    </form>
  )
}

export default reduxForm({
  form: 'myForm',
  initialValues: {
    username: 'admin',
    password: '123456'
  }
})(MyForm)

上面的代码中，我们通过 initialValues 设置了表单的默认值。如果我们想要从服务器端获取表单数据，可以在 reduxForm 中传入一个函数，这个函数会在组件渲染时被调用。

import { Field, reduxForm } from 'redux-form'

const getInitialValues = () => {
  // 调用接口获取表单数据
  return {
    username: 'admin',
    password: '123456'
  }
}

const MyForm = (props) => {
  const { handleSubmit, initialValues } = props

  return (
    <form onSubmit={handleSubmit}>
      <Field name="username" component="input" type="text" />
      <Field name="password" component="input" type="password" />
      <button type="submit">提交</button>
    </form>
  )
}

export default reduxForm({
  form: 'myForm',
  initialValues: getInitialValues
})(MyForm)

reset

reset 可以用来重置表单的状态。在 Redux Form 7.0 版本中，我们可以通过 reset 来清空表单数据。

import { Field, reduxForm } from 'redux-form'

const submit = (values, dispatch, props) => {
  // 调用接口提交表单数据

  // 清空表单数据
  props.reset()
}

const MyForm = (props) => {
  const { handleSubmit } = props

  return (
    <form onSubmit={handleSubmit(submit)}>
      <Field name="username" component="input" type="text" />
      <Field name="password" component="input" type="password" />
      <button type="submit">提交</button>
    </form>
  )
}

export default reduxForm({
  form: 'myForm'
})(MyForm)

上面的代码中，我们在 submit 函数中调用了 reset，这样可以在表单提交后清空表单数据。

总结

Redux Form 7.0 版本中，数据交互方面有了一些新的改进。我们可以通过 onSubmit 在表单提交时进行数据交互操作，通过 initialValues 获取服务器端的表单数据，通过 reset 清空表单数据。这些 API 可以帮助我们更方便地处理表单的数据交互。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bf6b12add4f0e0ff8f906f