如何根据react中的field1值将field2和field3设置为必需答案

【问题标题】：How to set the field2 and field3 to required based on the field1 value in react如何根据react中的field1值将field2和field3设置为必需
【发布时间】：2021-07-08 11:08:20
【问题描述】：

 Schema.model({
    field1: StringType(),
    field2: StringType(),
    field3: StringType()
    })

return (
 <Form
            model={model}
          >
<FormControl name="field1" />
<FormControl name="field2" />
<FormControl name="field3" />
</Form>
)

如何将field2 和field3 设置为必填字段？

我想要做的是当field 等于jake 时，field2 和field3 将是必需的。但当它不等于jake 时则不需要。

我尝试在field1 上使用onChange，但它不起作用。我也尝试了field2和field3中的addRule，但它也不起作用。

addRule((value, data) => { 
 if (data.field1 ==='jake') {
 return true;
} return false;
}

当 field1 中的值为 jake 时，我想在 field2 和 field3 StringType().isRequired('Required field') 中应用它。

【问题讨论】：

标签： javascript reactjs react-hook-form rsuite

【解决方案1】：

添加规则在我看来是正确的，但如果它不起作用，也许在你的 JSX 中试试这个：

  {this.state.field1 === 'jake'?
        <FormControl name="field2" required/>
        <FormControl name="field3" required/>
       :
       <FormControl name="field2" />
        <FormControl name="field3" />

对于字段 onChange={e => this.setState({field1: e.target.value})}

注意：我不确定这是否是最佳方式，但应该可以。

【讨论】：

是的，它会显示错误，但是当我尝试删除 field1 上的 jake 值，然后在 field2 上尝试输入一些值时，它仍然显示所需的消息
然后尝试使用一个函数，它返回具有必需属性if this.state.field === 'jake' 的输入字段或在 else 块中没有必需属性的输入字段，并将其与 field1 的 onChange 事件一起使用，并像 {requiredOrNot} 那样在 JSX 中渲染函数。

【解决方案2】：

听起来像是渲染周期的问题。确切地说，您是如何实现在更改时更改所需属性的？您需要通过一个状态变量来完成，以便 react 知道在它发生变化时重新渲染。

【讨论】：

当我使用状态时它可以工作，但我现在的问题是如何在我这样使用之前显示错误消息原因。 StringType().isRequired();