Question

我只是尝试使用redux-form v6 RC 4，我认为它比v5更好。但我被困在我代码的某个地方。我的组件无法使用renderField，因为我的“提交”和“清除值”按钮无法启用。有人可以检查我的代码，它有什么问题。感谢。

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

他们更改了传递给Field的组件的道具，以便绕过新的警告，对DOM元素上的无效属性进行反应抛出。他们需要修复文档中的示例以反映这一点。

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

1 个答案: