带有动态字段 id 的 redux 表单验证

Posted 2023-02-22

【中文标题】带有动态字段 id 的 redux 表单验证

【英文标题】：redux form validation with dynamic field id

【发布时间】：2018-09-08 02:02:27

【问题描述】：

当表单字段是动态的时，我被卡住了如何进行验证，就像我希望在每个字段上都需要和电子邮件验证，但是获得像 0-name:'',0-email:'' 等字段。 ..那么如何验证？我需要为每个字段添加验证吗？

class Dash extends Component 
ListData = () => 
    let a = [];
    for (var i = 0; i < 5; i++) 
        a.push(<ListItemView value=i key=i />);
    
    return a;
;
render() 
    return (
        <div className="col-lg-12 col-sm-12 col-12 r-p0">
            <CardContent className="pb-3 r-p0" elevation=4>
                    <form onSubmit=this.props.handleClick>
                        <List>this.ListData()</List>
                    </form>
                </CardBox>
            </CardContent>
        </div>
    );



const ListItemView = ( value ) => 
return (
    <ListItem className="invitememberlist">
        console.log(value, 'key')
        <div className="col-12 w-100">
            <div className="row">
                <div className="col-lg-4 col-sm-5 col-12">
                    <Field
                        name=`$value-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`
                        component=renderTextField
                        label="Email"
                        className="mt-1"
                        fullWidth
                        margin="normal"
                        type="email"
                    />
                </div>
            </div>
        </div>
    </ListItem>
);
;

验证.js

 export const isvalidinvitemember = (values) => 
   const errors = ;

     console.log(values);

return errors;
;

【参考方案1】：

Redux Form 有一个 validate 属性，如果你想验证每个字段，你可以使用这个属性。

例如：

<Field
 name="username"
 type="text"
 component=renderField
 label="Username"
 validate=required
/>

参考here