Redux-Form

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} 从 props 传递到您的自定义输入组件（它包括 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 - 验证只发生一次

Redux-Form - validation happens only once

reactjs