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

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.-]+\\.[AZ]{2,4}$/i.test(values.email)) { errors.email = 'Invalid email address'; } console.log(errors); return errors; }; export default reduxForm({ form: 'signup', validate })(Signup); 

我覺得我在這里缺少一些非常基本的東西，但我很難過。 我覺得應該派遣一個動作來切換布爾的“觸摸”屬性（從而重新渲染表單），但它似乎沒有這樣做，我找不到任何類似的讀取通過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