处理 React 中多个输入字段的可用性（禁用）答案

【问题标题】：Handle availability(disable) for multiple input fields in React处理 React 中多个输入字段的可用性（禁用）
【发布时间】：2019-07-11 07:44:58
【问题描述】：

我想管理多个输入字段的“禁用”属性。我创建了一个大型表单（超过 30 个输入），其中几个只有在选中前一个复选框时才可用。

我当前的设置类似于下面的示例。在此示例中，如果选择了“newsletter”，您只能选择“special_offers”。

class Form extends React.Component {
  state={
     newsletter: false,
     specialOffers: false,
     disabled:true,
}

  handleChangeCheck = name => e => {
    this.setState({
      [name]: e.target.checked
    });
    if (name === 'newsletter') {
      this.checkNewsletterValue()
    }
  };
  checkNewsletterValue() {
    if(this.state.newsletter === true){ 
    this.setState( {disabled: !this.state.disabled} )
  } 
}
  render() {
    return(
        <div>

            <Checkbox name="newsletter" value={this.state.newsletter} 
            onChange={handleChangeCheck('newsletter')}>Sign up for news letter
            </Checkbox>

            <Checkbox name="special_offers" value={this.state.specialOffers} 
            onChange={handleChangeCheck('specialOffers')}  disabled = 
            {this.state.disabled}>
            Sign up special offers
            </Checkbox>

        </div>
    );
  }
};

我的问题是，如果我需要创建一个新状态来更改依赖于先前选择的每个输入字段的“禁用”属性，我最终会得到一个更大的状态。

有没有办法创建一个通用的解决方案来处理我的输入字段的所有“禁用”值？

【问题讨论】：

您必须创建一个具有父子关系的对象数组

标签： reactjs forms input-field

【解决方案1】：

假设每个input 都有一个密钥，每个checkbox 都有一个密钥。

在这种情况下，我们有 newsletter 和 special_offers

我提出的方案是有一个数组处于状态： - checkedBoxes - 存储控制是否允许其他框的框的名称值。

在您的默认handleChangeCheck 中，每次选中一个框时，我们都会将其名称推送到数组中。

  handleChangeCheck = name => e => {
    let newCheckedBoxes = [...this.state.checkedBoxes]//don't forget to add a default value for that in the state as an array.
    //conditionally add or remove the items.
    if(newCheckedBoxes.indexOf(name)){
        newCheckedBoxes = newCheckedBoxes.filter(_name => _name !== name);
    } else {
        newCheckedBoxes.push(name);
    }
    e.target.checked && newCheckedBoxes.push(name)
    this.setState({
      [name]: e.target.checked,
      checkedBoxes: newCheckedBoxes,
    });
  };

在您的条件禁用框中。

<Checkbox
  name="special_offers"
  value={this.state.specialOffers} 
  onChange={handleChangeCheck('specialOffers')}
  disabled={!this.state.checkedBoxes.includes('newsletter')}>
    Sign up special offers
</Checkbox>

【讨论】：

太棒了！这看起来是我的问题的一个很好的解决方案。我将在今天晚些时候尝试将其实施到我的项目中，并将发布更新。谢谢！
感谢拉斯，祝你好运！
酷，成功了！但是，一旦取消选中，我需要添加功能以再次删除它，否则它只能在第一次工作。
哦，如果您能投票支持我的问题以帮助我获得 15 名声望，那就太好了 :)

【解决方案2】：

你可以尝试使用 hooks，而不是经典组件。它会减少臃肿，并且通过一些自定义钩子，您可以将整个功能减少到只有一个功能，您只发送选中的一个和选中的一个影响的复选框

什么是 Hook？ Hook 是一种特殊功能，可让您“挂钩” 反应特征。例如，useState 是一个 Hook，可让您添加将状态反应到功能组件。我们稍后会学习其他 Hooks。

我什么时候会使用 Hook？ 如果你写一个函数组件并实现您需要为其添加一些状态，之前您必须将其转换为一类。现在您可以在现有函数中使用 Hook 零件。我们现在就去做！

What's a Hook?

顺便说一句，不要“尝试”钩子，如果你的APP里还可以的话，把它们移到钩子上，它们更干净，更快。

【讨论】：

感谢您的建议！我会考虑使用钩子。