Question

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

我当前的设置类似于下面的示例。在此示例中，如果选择了“新闻通讯”，则只能选择“ 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>
    );
  }
};

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

是否可以创建一种通用解决方案来处理我输入字段的所有“禁用”值？

Answer 1

好吧，您可以尝试使用挂钩，而不是经典组件。这样可以减少膨胀，并且还可以使用一些自定义钩子将整个功能减少为仅一个功能，在该功能中，您仅发送选中的功能和选中的功能会影响复选框。

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

我何时使用挂钩？如果您编写一个功能组件并意识到   您需要为其添加一些状态，之前您必须将其转换为   一类。现在您可以在现有函数中使用一个Hook   零件。我们现在就要做！

What's a Hook?

顺便说一句，不要“尝试”钩子，如果仍然可以在APP中将它们移到钩子上，它们将变得更干净，更快。

Answer 2

我们假设每个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>

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

2 个答案: