javascript - 有没有一种方法可以在点击一定次数后禁用 ReactJS 中的按钮？

Question

我对 React 比较陌生，我正在研究一个按钮，该按钮复制我在单击时创建的组件，但我想限制用户只能在之前单击该按钮一定次数(例如 4 次)该按钮不起作用/已删除。如果有帮助，这里有一个代码片段；这可能吗？我想过有一个计数器，但我如何在按钮旁边实现它？
非常感谢!

function App() {
  const [inputList, setInputList] = useState([]);

  const onAddBtnClick = event => {
    setInputList(inputList.concat(<Autocomplete items={foods} />));
  };

  return (
    <Fragment>
      <div className="foodcompleter">
        <Button onClick={onAddBtnClick} variant="primary" size="lg" block>Add Food</Button> 
        {inputList}
      </div>
    </Fragment>
  );
}

Answer 1

您基本上可以检查是否inputList.length === 4 ，然后您禁用按钮