表单加载后 redux-form 字段不是 rerendering/updating

Question

我在使用 redux-form 进行登录表单字段验证时遇到问题。目前，我只是想让同步验证正常工作，这样我就可以检查基本错误。问题是表单似乎只在组件安装时检查验证，然后在该点之后不再检查。这是我的代码：

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import * as Redux from 'react-redux';

import Input from './../../helpers/Input';
import Button from './../../helpers/Button';

export const Signup = React.createClass({

    renderInput({ label, type, input: { value }, meta: { touched, error }}){
        return (
            <Input label={ label }
                   type={ type }
                   filled={ value ? true : false }
                   touched={ touched }
                   error={ error } />
        );
    },

    render(){

        const { handleSubmit } = this.props;

        return(
            <div>
                <form onSubmit={ handleSubmit }>
                    <Field name="email" label="Email" component={ this.renderInput } />
                    <Field name="username" label="Username" component={ this.renderInput } />
                    <Field name="password" label="Password" type="password" component={ this.renderInput } />
                    <Field name="confirmPassword" label="Confirm Password" type="password" component={ this.renderInput } />
                    <Button type="submit" btnType="main" btnIcon="" btnText="Create Account" />
                </form>
            </div>
        );
    }
});

export const validate = values => {
    const errors = {};
      if (!values.username) {
          errors.username = 'Required';
      } else if (values.username.length > 15) {
          errors.username = 'Must be 15 characters or less';
      }

      if (!values.email) {
          errors.email = 'Required';
      } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
          errors.email = 'Invalid email address';
      }
      console.log(errors);
      return errors;
};

export default reduxForm({
  form: 'signup',
  validate
})(Signup);

我觉得我在这里遗漏了一些非常基本的东西，但我很困惑。我觉得应该发送一个动作来切换 "touched" 属性 onBlur（从而重新呈现表单），但它似乎并没有这样做而且我找不到类似的阅读通过 redux-form 文档。有什么想法吗？

Answer 1

您没有将 onChange 处理程序传递给您的 Input 组件，因此 redux-form 不知道值已更改。

问题出在这里：

renderInput({ label, type, input: { value }, meta: { touched, error }}){
    return (
        <Input label={ label }
               type={ type }
               filled={ value ? true : false }
               touched={ touched }
               error={ error } />
    );
},

要解决这个问题，请将 input 作为属性传递给您的 Input 组件，并像这样定义它，例如：

<div className="input-row">
  <input {...input} type="text"/>
  {touched && error && 
  <span className="error">{error}</span>}
</div>

不要忘记将函数签名更改为 renderInput({ label, type, input, meta: { touched, error }}) { ... } - value 已在此处删除。

作为替代方案，您可以显式传递 onChange:

 renderInput({ label, type, input: { value, onChange }, meta: { touched, error }}){
        return (
            <Input label={ label }
                   onChange = { onChange }
                   type={ type }
                   filled={ value ? true : false }
                   touched={ touched }
                   error={ error } />
        );
    },

然后在 <Input ... />

中使用 onChange

表单加载后 redux-form 字段不是 rerendering/updating

redux-form fields not rerendering/updating after form loads

forms

reactjs

redux

redux-form