在 Typescript 的 Ant 设计中单击表内后如何禁用按钮？答案

【问题标题】：How to disable a button after click inside a Table in Ant design in Typescript?在 Typescript 的 Ant 设计中单击表内后如何禁用按钮？
【发布时间】：2022-12-12 11:34:32
【问题描述】：

在 ant design 中的反应表中单击后，如何禁用以下按钮。

<Button
          type="primary"
          onClick={() => {
            console.log('clicked');
          }} 
        >
          Resend
        </Button>

我不想将其设置为禁用。我希望在用户单击按钮后禁用该按钮。

【问题讨论】：

你这是什么意思？ I don't want to set it to be disabled. I want the button to be disabled 因为它没有多大意义。
用户点击后你的意思是按钮必须是一次性点击？你可以在onClick中设置它，比如this.setState({ buttonDisabled: true });
通过这个“我不想将其设置为禁用。我希望按钮被禁用”我的意思是我只希望按钮在被点击后被禁用

标签： reactjs typescript antd

【解决方案1】：

您使用的是什么版本的 React？如果是 16.8+，那么您可以使用状态挂钩在单击时设置为禁用。 Here is a simple example

  const [buttonEnabled, setButtonEnabled] = useState(true);

  const clickHandler = () => {
    setButtonEnabled(false);
  };

  const resetHandler = () => {
    setButtonEnabled(true);
  };

  return (
    <div>
      <button disabled={!buttonEnabled} onClick={clickHandler}>
        Button
      </button>

      <hr />
      <button onClick={resetHandler}>Reset</button>
    </div>
  );

【讨论】：

出于某种原因，我收到一个错误，“找不到这些名称，'!buttonEnabled' 和 'clickHandler'。另外我正在使用 Typescript 进行编码，但您发布的示例是一个 js 文件。谢谢
我发布的这段代码用于 ant design 的表中的一列中。