Redux 表单 - 同步验证示例

Question

我正在查看 redux 表单文档。我遇到过这个example。我想知道的是，在解构 SyncValidationForm 中的 props 对象时，我们从哪里得到 handleSubmit、pristine、reset、submitting :

const SyncValidationForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field name="username" type="text" component={renderField} label="Username"/>
      <Field name="email" type="email" component={renderField} label="Email"/>
      <Field name="age" type="number" component={renderField} label="Age"/>
      <div>
        <button type="submit" disabled={submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  )
}

Sinc，据我所知，我们只在 index.js:

中传递了 onSubmit 属性

<SyncValidationForm onSubmit={showResults} />

Answer 1

在示例中 SyncValidationForm 导出为 reduxForm:

export default reduxForm({
  form: 'syncValidation', // a unique identifier for this form
  validate, // <--- validation function given to redux-form
  warn // <--- warning function given to redux-form
})(SyncValidationForm)

这使得它 Higher Order Component 类似于 redux connect 注入额外的表单道具。

Redux 表单 - 同步验证示例

Redux form - sync validation example

redux-form