有没有一种方法可以在点击一定次数后禁用 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 ，然后禁用该按钮

Answer 2

您可以使用 state 创建您的组件 CustomButton，它可以保存点击次数，并且在每次 state 更改后，只需验证点击次数是否等于您想要的值。

Answer 3

您可以在单击后删除事件侦听器

const onKeyDown = (event) => { console.log(event) }

useEffect(() => {
window.addEventListener('keydown', onKeyDown)

return () => { window.removeEventListener('keydown', onKeyDown) }
}, [])