我正在构建一个表单，它根据字段的 json 定义插入字段，解析 json 对象并将其传递给 switch 语句，该语句选择适当的小部件并将其插入到数组中，然后对该数组进行排序，然后使用数组映射呈现我需要的内容要实现的是在按下提交后调用每个字段的验证字段 现在我如何访问此元素并调用适当的验证逻辑
到目前为止我尝试过的
this.refs["myWrapper].props.children这种方法访问作为该视图的子项的小部件使我可以访问我的小部件，但返回的对象不包含我的方法，因此调用它们会抛出错误，因为它不是函数代码示例
`导出类 myForm 扩展组件{
constructor(props){
super(props);
this.fields=[];
}
getFields(fields){
let {formName,title}=this.props;
let field,_fields=[],item;
fields= this.sortFieldsOrder(fields);
fields.forEach((sect,i)=>{
for(field in sect)
{
item=sect[field];
switch (item.widget){
case "inlineText":
_fields.push(
<EbTextInput key={field}
{...{...item.props,formName,title}}
field={field}
label={item.hasOwnProperty("label")?item.label:""}
validator={item.hasOwnProperty("validator")?item.validator:()=>{}}
/>
);
break;
case "hidden":
_fields.push(
<EbHiddenInput key={field}
{...{...item.props,formName,title}}
field={field}
label={item.hasOwnProperty("label")?item.label:""}
validator={item.hasOwnProperty("validator")?item.validator:()=>{}}
/>
);
break;
case"modal":
_fields.push(
<EbModalInput
key={field}
{...{...item.props,formName,title}}
field={field}
fields={item.props.fields instanceof Array?this.getFields(item.props.fields):[]}
label={item.hasOwnProperty("label")?item.label:""}
validator={item.hasOwnProperty("validator")?item.validator:()=>{}}
/>
);
break;
case"filePicker":
let picker=<EbFilePickerInput key={field}
{...{...item.props,formName,title}}
field={field}
label={item.hasOwnProperty("label")?item.label:""}
validator={item.hasOwnProperty("validator")?item.validator:()=>{}}
/>;
picker=[picker];
_fields.push(
<EbModalInput key={field}
{...{...item.props,formName,title}}
field={field}
fields={picker}
label={item.hasOwnProperty("label")?item.label:""}
validator={item.hasOwnProperty("validator")?item.validator:()=>{}}
/>
);
break;
case "option":
_fields.push(
<EbOptionInput
key={field}
{...{...item.props,formName,title}}
field={field}
fields={item.props.fields instanceof Array?this.getFields(item.props.fields):[]}
label={item.hasOwnProperty("label")?item.label:""}
validator={item.hasOwnProperty("validator")?item.validator:()=>{}} />
);
break;
default:
}
}
});
return _fields;
}
sortFieldsOrder(arr){
return arr.sort((a,b)=>{
let keyA=Object.keys(a)[0];
let keyB=Object.keys(b)[0];
if(a[keyA]["order"]<b[keyB]["order"])return 1;
if(a[keyA]["order"]>b[keyB]["order"])return -1;
return 0;
});
}
componentWillMount(){
let {fields}=this.props;
this.fields=this.getFields(fields)
}
renderFields(){
return this.fields.map((item)=>{
return item;
})
}
validateForm(){
let field;
let fields=this.refs["wrapper"].props.children;
let status=true;
React.Children.map(this.refs["wrapper"].props.children, (child) => {
if(!child.validate()){
status= false;
console.log("valid form cheki");
// break;
}
})
return status;
}
render(){
return(
<View ref="wrapper" style={[styles.flex1]}>
{this.renderFields()}
<Button text="Submit" onPress={(e)=>{
if(this.validateForm()){
//alert("valid form")
}
else
alert("invalid form")
}}> </Button>
</View>)
}
}
`
在反应中，无论出于何种原因，它都是直接访问节点的蚂蚁模式，所以我决定使用 redux 遵循上面的第一条评论我可以发送验证信号并让每个小部件验证自己的状态，这减少了耦合并且易于实现和调试所以我会推荐每个有同样问题的人来关注这个通行证
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句