Question

这里我有验证问题，我想渲染5个项目的列表，其中列表中的所有字段都相同，下面是代码

ListData = () => {
    let a = [];
    for (var i = 0; i < 5; i++) {
        a.push(<ListItemView value={i} key={i} />); // Component
    }
    return a;
};


render() {
    return (
     <div>
       <List>{this.ListData()}</List> // List of 5 items
       <Button disabled={this.props.disabledSubmission} 
        color="primary"type="submit">
        Invite Members
       </Button>
    )
}

FieldComponent

 const ListItemView = ({ value }) => {
   return (
    <ListItem>

        <div className="col-12 w-100">
            <div className="row">
                <div className="col-lg-4 col-sm-5 col-12">
                    <Field
                        name={`${value}-name`}       // 0-name
                        component={renderTextField}
                        label="Name"
                        className="mt-1"
                        fullWidth
                        margin="normal"

                    />
                </div>
                <div className="col-lg-5 col-sm-5 col-12">
                    <Field
                        name={`${value}-email`}     // 0-email
                        component={renderTextField}
                        label="Email"
                        className="mt-1"
                        fullWidth
                        margin="normal"
                        type="email"
                    />
                </div>
            </div>
        </div>
    </ListItem>
    );
 };

问题是，当我尝试使用redux格式进行验证时，我很困惑如何使用它来验证每个字段的名称 - 0-name,0-email等...

那么，我怎么能用循环检查它或者使得验证适用于每个字段并且静态地写这样的东西

 const validation = (values) => {
  const errors = {};
  if(!values[`0-name`]) {
    errors.values[`0-name`] = 'Required'
  } else if(!values[`0-email`]) {
    errors.values[`0-email`] = 'Required'
  } 
  if(!values[`1-name`]) {
    errors.values[`1-name`] = 'Required'
  } ... // and many more...

   return errors;
 };

Answer 1

理想情况下，您应该有两个单独的纯函数，一个用于验证Name，另一个用于验证电子邮件。如下。

<Field
                    name={`${value}-name`}       // 0-name
                    component={renderTextField}
                    label="Name"
                    className="mt-1"
                    fullWidth
                    margin="normal"
                    validate={validateName}

                />
            </div>
            <div className="col-lg-5 col-sm-5 col-12">
                <Field
                    name={`${value}-email`}     // 0-email
                    component={renderTextField}
                    label="Email"
                    className="mt-1"
                    fullWidth
                    margin="normal"
                    type="email"
                    validate={validateEmail}
                />

但是，如果你想要唯一的功能来完成这项工作

const validate = (value, allValues, props, name) => {
if(name.includes('email')&& notEmail(value)){
return 'invalid email'
}
if(name.includes('name')&& notName(value)){
return 'invalid Name' 

}

return undefiend;

}

如何在redux形式中使用不同的名称id多次渲染相同的字段时验证字段

1 个答案: