Question

我试图在我的redux表单上访问被触摸的属性，但由于某些原因，当我打印字段props时，我只使用值而不是对象。我错过了什么？

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

render() {
  const { fields: { email, phone }, handleSubmit } = this.props;
  console.log(email) //prints just the value "email" instead of the field object with the touched method, etc. When I do console.log(email.touched) I get undefined error.
  return (
    <form onSubmit={handleSubmit(this.onSubmit)}>
       <Field name="email" component="input" type="email" { ...email } />
       <Field name="phone" component="input" type="number" { ...phone } />     
    </form>
  );


}


export default ReduxFormTest = reduxForm({
  form: 'uniqueForm',
  fields: ['email', 'phone']
})(TestClass);

Answer 1

从v5到v6的redux形式发生了重大变化。以前，您可以执行类似于访问触摸字段所需的操作。如果你想做类似的事情来查看字段上是否有错误，你需要创建自己的组件以传递给redux-form的Field组件。

您的自定义组件

const CustomComponent = function(field) {
  return (
    <div>
      <input
        type={field.type}
        {...field.input}
        />
      {field.meta.touched && field.meta.error && <div className='error'>{field.meta.error}</div>}
    </div>
  )
}

然后将其与Field组件一起使用

<Field name="my-prop" component={CustomComponent} />

另请查看迁移guide，希望这有帮助！

Answer 2

您将v5语法与v6语法混淆。在v6中，您的已修饰表单组件不再传递this.props.fields。重新阅读迁移指南，如@ tyler-iguchi所说。

为什么redux形成返回字符串而不是对象？

2 个答案: