从使用 React Native 中的 Map 函数渲染的组件的父级调用子方法

>正在构建一个表单，该表单根据字段的 JSON 定义插入字段 JSON 对象被解析并传递给 switch 语句，该语句选择适当的小部件并将其插入到数组中该数组排序然后使用数组映射渲染我需要实现的是在按下提交后调用每个字段的验证字段现在我如何访问此元素调用适当的验证逻辑

到目前为止我尝试过什么

当我将小部件推送到数组中使用引用抛出与在渲染函数外部分配引用相关的错误
1. 将调用包装为引用视图中的映射，并通过this.refs["myWrapper].props.children作为该视图的子项访问小部件这种方法使我可以访问我的小部件，但返回的对象不包含我的方法，因此调用它们会抛出错误，而不是函数

代码示例

'export class 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>)
}

}

在 react 中，出于任何原因直接访问节点是蚂蚁模式，所以我决定使用 redux 遵循上面的第一条评论，我可以发送验证信号并让每个小部件验证自己的状态，这减少了耦合并且易于实现和调试，所以我建议所有有相同问题的人遵循此通行证

实际上，您可以在您的情况下使用 refs，但与其通过在componentWillMount中调用getFields来生成子组件，不如直接在render方法中调用它。换句话说，没有必要有this.fields，你可以直接渲染它们。只要你有正确的键，React 就会正确管理缓存。

相关内容

最新更新

热门标签：