Question

我正在浏览redux表单文档。我遇到了这个example。我想知道的是，当handleSubmit解构pristine对象时，我们从reset，submitting，props，SyncValidationForm获得了什么？：

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表单 - 同步验证示例

1 个答案: