redux-form v6不能在Field属性中使用renderField

Question

I just try redux-form v6 RC 4, i think it nicer than v5. but i get stucked at somewhere on my code. my component didn't work with renderField, because of that my "submit" and "clear value" button can't be enable. can someone check out my code, what's wrong in it. thanks.

 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.-]+\\.[AZ]{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); 

if i change component = {renderField} to component = input everything is working fine. i still don't know why. i already follow the documentation in redux form v6 RC4

Answer 1

Just spent 4 hours trying to figure this one out also. Finally got it.

Change renderField to:

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>
);

They changed the props that get passed through to your Field's component in order to get around the new warnings react throws for invalid attributes on DOM elements. They need to fix the examples in the docs to reflect this.