Question

我有一个反应形式，这是巨大的。它有大约80个字段，当选中/取消选中某个复选框时，会挂载或卸载字段。

当我想在其中一个字段中警告错误时，我遇到了一个问题。

这种形式的结构是这样的：

//parentNode.js
render: function() {
  if(this.refs.tab1 && this.refs.tab1.isError()) var tab1icon = <img src="my.."/>
  if(this.refs.tab2 && this.refs.tab2.isError()) var tab2icon = <img src="my.."/>
  if(this.refs.tab3 && this.refs.tab3.isError()) var tab3icon = <img src="my.."/>

  return(
    <div>
      <tab1>
        {tab1icon}
        <subform ref="tab1" data={this.state.form.tab1}/>
      </tab1>
      <tab2>
        {tab2icon}
        <subform ref="tab2" data={this.state.form.tab2}/>
      </tab2>
      <tab3>
        {tab3icon}
        <subform ref="tab3" data={this.state.form.tab3}/>
      </tab3>
    </div>
  );
},


//middleNode.js

isError: function() {
  for (field in this.refs) {
     //... Filter prototype properties.
     if(this.refs[field].isError()) return true;
  }
  return false;
}


//leafNode.js

isError: function() {
  //Validate this.refs.myLeafNode.getValue()
}

这里的问题是，我在重新呈现此选项卡之前检查错误，因此如果要卸载某些字段，isError将验证它们。假设其中一个字段包含无效值，卸载后该值不再重要，但使用此解决方案时，将显示错误图标。

那么，这是实现这种验证的最佳方式吗？我试图降低管理每个子表单到其反应组件的责任，因为我说这个表单非常复杂，不同的子表单有不同的规则。

在反应中管理表单验证 - 尝试将验证转移到子组件

0 个答案: