Question

我是redux-form的新手，我遵循了这个简单的例子：http://redux-form.com/6.0.5/examples/syncValidation/

我做了它所说的一切但是由于某种原因，我在传递时只调用了一次验证函数，并且在创建表单时调用它，并且在更改值时它不会调用。

这是我的代码：

减速器：

import { combineReducers } from 'redux-immutable';
import { reducer as formReducer } from 'redux-form/immutable';

export const appReducers = combineReducers({
    form: formReducer
});

我的表格：

import React, { PropTypes } from 'react';
import { Field, reduxForm } from 'redux-form';
import TextField from 'react-mdl';

class Form extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: Map({
                id: '',
                name: ''
            })
        };

        this.onIdChange = this.onIdChange.bind(this);
        this.onNameChange = this.onNameChange.bind(this);
    }

    onIdChange(event) {
        // change the id in the user.
    }

    onNameChange(event) {
        // change the name in the user.
    }

    render() {
        const { handleSubmit } = this.props;

        return (<form onSubmit={handleSubmit}>
                <Field name='id'
                    label='id'
                    component={TextField}
                    onChange={this.onIdChange}
                    value={this.state.user.get('id')} />
                <Field name='name'
                    label='name'
                    component={TextField}
                    onChange={this.onNameChange}
                    value={this.state.user.get('name')}/>
            </form>);
    }
}

const validate = values => {
    const errors = {};

    if (!values.id) {
        errors.id = 'Required';
    }

    if (!values.name) {
        errors.name = 'Required';
    }

    return errors;
}

export default reduxForm({
    form: 'userForm',
    validate
})(Form);

Answer 1

如果您使用的是不可变导入 import { reducer as formReducer } from 'redux-form/immutable'; 用于减速机。您还应该使用相同的实际表单导入，如下所示： import { Field, reduxForm } from 'redux-form/immutable';
如果这不能解决问题，我认为onChange和您定义的自定义处理程序（onNameChange）正在改变内部状态。
还要记住始终将{...input}从道具传递到自定义输入组件（它包括redux-form onChange，......需要）。像这样： const renderField = ({ input, label, type }) => ( <div> <label>{label}</label> <div> <input {...input} placeholder={label} type={type}/> </div> </div> )

Answer 2

我知道这不是原始提问者的问题，但如果有人在使用redux-form/immutable时遇到同样的问题，请务必访问您的values验证函数为不可变数据类型，例如使用.get()方法而不是普通的点表示法。如果您按照文档中的示例进行操作，似乎很简单，但很容易错过。

Redux-Form - 验证只发生一次

2 个答案: