Question

我使用使用相同表单名称修饰的多个组件进入验证问题。

假设我们有SimpleForm1和SimpleForm2。使用SimpleForm1字段验证进行呈现时，只有name按预期工作，以及使用SimpleForm2字段呈现surname时。但是当在单个页面上呈现它们时，SimpleForm1的验证被破坏了。

问题是如何避免这种行为并使两种验证功能都有效。

Here is a fiddle which illustrates my problem

Answer 1

对多个表单使用相同的名称不是一个好主意。据我了解，您需要动态添加表单输入（在您的示例中为SimpleForm2），并且有可能使用一个按钮提交两种表单。如果是，那么您只需在第一种形式中添加输入，就不需要第二种形式。

表格：

const SimpleFormComponent1 = props => {
    const {handleSubmit, pristine, reset, submitting, renderBoth} = props;
    const onSubmit = (values) => {
        alert(JSON.stringify(values));
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            ...
            {
                renderBoth &&
                <Field
                    name="surname"
                    type="text"
                    component={renderField}
                    label="Surname"
                    validate={validateSurname}
                />
            }
            ...
        </form>
    )
};

渲染功能：

render() {
        const {renderBoth} = this.state;

        return (
            <div>
                <div className='forms'>
                    <SimpleForm renderBoth={renderBoth}/>
                </div>
                <button
                    type='button'
                    onClick={this.handleClick}>
                    {renderBoth ? 'Show Single' : 'Show Both'}
                </button>
            </div>
        );
    }

Updated example

Answer 2

解决方案1 

由于Redux表单的invalid和valid道具受到干扰，因为我在validate的主要表单组件的每个文件中编写了ReduxForm()函数。 / p>

您无需更改表单名称即可解决此问题。您必须将验证功能放在父组件上。

这里是一个例子：

[上下文]

我有3个组成部分： 1.放置表单（'editUserForm'）元素（，，...）的主要组件 2.更改用户全名的表单（'editUserForm'）的Field1。 3.更改用户电子邮件的表单（'editUserForm'）的Field2。

[解决方案]

主要组件：在主机内部，您调用reduxForm（）（它创建一个装饰器，您可以使用该装饰器使用redux-form将表单组件连接到Redux。有关更多信息，请点击Redux Form docs ）。您的代码将如下所示：

import...

class MainFrame ... {
   ...
   <form ...>
         <Field1 />
         <Field2 />
   </form>
   ...
}

const validate ({ name, email }, props) => {
    errors={}

    // Validation around Field1
    if (name === ...) errors.name = "Name error passed to Field1 component";

    // Validation around Field2
    if (email === ...) errors.email= "Email error passed to Field2 component";

    return errors;
}
...
export default reduxForm({
    form: 'editUserForm',
    validate // <--------- IMPORTANT: Only put this function on the parent component.
})(MainComponent);

FIELD1和FIELD2组件：此代码适用于2个子组件。重要说明：您调用reduxForm（）而没有 validate Redux Form docs同步函数。

import...

class MainFrame ... {
   ...
   const { invalid } = this.props;
   ...
   <inputs
       error={invalid}
   >
         ...
   </input>
   ...
}

// IMPORTANT: Don't put the validation function in Field1 and Field2 components, because their local validations will interfere with the validation of the other Field component.
reduxForm({
    form: 'editUserForm'
})

现在，道具valid和invalid将在子组件（Field1和Field2）内完美运行。

解决方案2

用户Redux表单FormSection（docs）将表单拆分为较小的组件，这些组件可以在多种表单之间重复使用。

使用具有相同表单名称的多个组件时，Redux表单验证会中断

2 个答案: