我正在构建一个复选框列表，只希望用户能够选择 2 个复选框，然后它将禁用这些复选框。我有一个禁用的props，我可以传递一个布尔值，但在禁用复选框的逻辑上有问题。
<UISelectableButton
key={i}
block={true}
value={workflow}
disabled={selectedRevisions > 1 && true}
onSelectedChange={this.onSelectedChange}
onClick={() => this.handleRevisions(workflow)}
type="checkbox"
/>
对于 onSelectedChange 我有一个函数可以保存当前选择了多少复选框的索引。我可以通过三元运算符轻松禁用按钮，selectedRevisions > 2只要选择了 2 个以上的项目，然后我就禁用按钮。问题是这将禁用所有按钮，我不想禁用任何已选择的按钮。有没有办法检查复选框是否已被选中并仍然传递disabled布尔值而不是函数。
您可以将一个对象保持在跟踪复选框值的状态，并且在您的渲染方法中，您可以检查是否有 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>使用引导程序，仅此而已
<input
type="checkbox"
className="form-check-input"
id="exampleCheck1"
disabled={true}
/>