代码之家 › 专栏 › 技术社区 › Golan Kiviti

重做表单-验证只发生一次

redux-form reactjs

Golan Kiviti · 技术社区 · 8 年前

我是redux表单的新手,我举了一个简单的例子: 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);

2 回复 | 直到 8 年前

Pouya Sanooei 8 年前

如果使用的是不可变导入 import { reducer as formReducer } from 'redux-form/immutable'; import { Field, reduxForm } from 'redux-form/immutable';
如果这不能解决问题,我认为onChange和您定义的自定义处理程序(onNameChange)有问题,它们正在改变内部状态。
还请记住始终传递 {...input} 从props到您的自定义输入组件(它包括redux表单onChange,…needed)。这样地: const renderField = ({ input, label, type }) => ( <div> <label>{label}</label> <div> <input {...input} placeholder={label} type={type}/> </div> </div> )

Shane Cavaliere 8 年前

我知道这不是最初提问者的问题,但如果有人在使用 redux-form/immutable ,请确保访问您的 values 在验证函数中作为不可变数据类型,例如使用 .get() 方法而不是普通的点符号。看起来很简单,但如果你遵循文档中的示例,很容易忽略。