Question

我正在构建复选框列表，并且只希望用户能够选择2个复选框，然后它将禁用该复选框。我有一个禁用的道具，可以传递一个布尔值，但是在禁用复选框的逻辑上遇到麻烦。

<UISelectableButton
    key={i}
    block={true}
    value={workflow}
    disabled={selectedRevisions > 1 && true}
    onSelectedChange={this.onSelectedChange}
    onClick={() => this.handleRevisions(workflow)}
    type="checkbox"
/>

对于onSelectedChange，我有一个函数可以保存当前选中的复选框的索引。通过执行selectedRevisions > 2，我可以轻松地使用三元运算符禁用按钮，然后只要选择了两个以上的项目，就可以禁用按钮。问题是这将禁用所有按钮，并且我不想禁用已选择的任何按钮。有没有一种方法可以检查是否已选中该复选框，并且仍然向disabled传递布尔值而不是函数。

Answer 1

您可以使对象保持可跟踪复选框值的状态，并且在渲染方法中，您可以检查是否选中了2个或更多复选框，并使用此复选框禁用其他复选框。

示例

class App extends React.Component {
  state = { checked: {} };

  onSelectedChange = index => {
    this.setState(previousState => ({
      checked: {
        ...previousState.checked,
        [index]: !previousState.checked[index]
      }
    }));
  };

  render() {
    const { checked } = this.state;
    const checkedCount = Object.keys(checked).filter(key => checked[key]).length;
    const disabled = checkedCount > 1;

    return (
      <div>
        {Array.from({ length: 5 }, (_element, index) => (
          <input
            key={index}
            onChange={() => this.onSelectedChange(index)}
            type="checkbox"
            checked={checked[index] || false}
            disabled={!checked[index] && disabled}
          />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 2

只有引导程序了

                <input
                    type="checkbox"
                    className="form-check-input"
                    id="exampleCheck1"
                    disabled={true}
                />

有条件禁用的React复选框

2 个答案: