redux-form v6は、フィールドプロパティ内でrenderFieldを使用できません

Question

私はredux-form v6 RC 4を試してみます。私はv5よりも良いと思います。しかし、私はどこかで自分のコードに固執する。私のコンポーネントはrenderFieldで動作しませんでした。なぜなら、私の "submit"と "clear value"ボタンは有効にできないからです。 誰かが自分のコードをチェックアウトできますが、何が間違っていますか？ありがとう。

import React from 'react'; 
 
import {reduxForm, Field} from 'redux-form'; 
 
import * as actions from '../actions'; 
 
import {browserHistory} from 'react-router'; 
 

 
const validate = values => { 
 
    const errors = {}; 
 
    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' 
 
    } 
 
    if (!values.password) { 
 
     errors.password = 'Required' 
 
    } 
 
    return errors 
 
}; 
 

 
const renderField = (props) => (
 
    <div> 
 
     <label>{props.placeholder}</label> 
 
     <div> 
 
      <input {...props}/> 
 
      {props.touched && props.error && <span>{props.error}</span>} 
 
     </div> 
 
    </div> 
 
); 
 

 
const Loginv6 = (props) => { 
 

 
    const {handleSubmit, pristine, reset, submitting} = props; 
 

 
    return (
 
     <div className="row"> 
 
      <div className="col-md-6"> 
 

 
       <form onSubmit={handleSubmit}> 
 
        <div className="form-group"> 
 
         <Field 
 
          name = "email" 
 
          type="text" 
 
          component = {renderField} 
 
          className="form-control" 
 
          placeholder="Email" 
 
         /> 
 
        </div> 
 

 
        <div className="form-group"> 
 
         <Field 
 
          name = "password" 
 
          type="password" 
 
          component = {renderField} 
 
          className="form-control" 
 
          placeholder="Password" 
 
         /> 
 
        </div> 
 

 
        <div> 
 
         <button type="submit" className="btn btn-primary" disabled={pristine||submitting}> 
 
          Login 
 
         </button> 
 

 
         <button type="button" className="btn btn-primary" disabled={pristine || submitting} onClick={reset}> 
 
          Clear Values 
 
         </button> 
 
        </div> 
 
       </form> 
 

 
      </div> 
 
     </div> 
 
    ) 
 
}; 
 

 

 
function mapStateToProps(state) { 
 
    return { 
 
     errorMessage: state.auth.error, 
 
     authenticated:state.auth.authenticated 
 
    } 
 
} 
 

 
export default reduxForm({ 
 
    form:'Loginv6', 
 
    validate 
 
},mapStateToProps,actions)(Loginv6);

私はcomponent = {renderField} component = inputにすべてが正常に動作して変更した場合。私はまだなぜか分からない。私はすでにredux形式のドキュメントに従っています。v6 RC4

Answer 1

ちょうど4時間かけてこのことも理解しようとしました。最後にそれを得た。

変更renderFieldへ：

const renderField = (props) => (
    <div> 
     <label>{props.placeholder}</label> 
     <div> 
      <input {...props.input}/> 
      {props.meta.touched && props.meta.error && <span> {props.meta.error} </span>} 
     </div> 
    </div> 
); 

彼らは、新しい警告がDOM要素に無効な属性のためにスロー反応を回避するために、自分フィールドのコンポーネントに通過します小道具を変更しました。これを反映するために、ドキュメントの例を修正する必要があります。