Question

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

＆＃13;

xxx.prototxt

＆＃13;

我觉得我在这里遗漏了一些非常基本的东西，但我很难过。我觉得应该派出一个行动来切换＆＃34;触及＆＃34;属性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 } />
        );
    },

然后在onChange

中使用<Input ... />

redux-form字段在表单加载后不重新渲染/更新

1 个答案: