根据其他输入值将复选框设置为选中

Question

如果特定输入填充了值，我想将复选框输入设置为选中，但可以选择再次将复选框更改为未选中。

业务需求要求如果用户填写了所需的输入，则应将此复选框设置为自动选中，但如果他愿意，可以选择将其设置回未选中状态。（用户体验资料）usecase demo

考虑以下代码：

     autoAddFinalEvaluation = () => {
      const {channelValue, evaluationValue, txtValue} = this.state;
      if(channelValue !== null && evaluationValue !== null && txtValue !== '') {
        this.setState({
          checked: true
        })
      } 
    }

我像这样动态更新了状态

  autoAddFinalEvaluation = () => {
    const {channelValue, evaluationValue, txtValue} = this.state;
    if(channelValue !== null && evaluationValue !== null && txtValue !== '') {
      this.setState({
        checked: !this.state.checked
      })
    }
  }

现在我可以正常设置复选框，但仍然无法正常工作，在填充第三个输入（文本区域）时，复选框从 true 切换为 false，反之亦然。

Answer 1

我认为问题是 "autoAddFinalEvaluation" 在您取消选中复选框后执行，而它应该仅在我们可能称为父字段的输入发生更改时调用（输入导致复选框被选中的字段） .

根据其他输入值将复选框设置为选中

Set checkbox to checked based on other inputs values

javascript

forms

validation

user-experience

reactjs