如何点击一次后禁用React项目中Material UI的按钮？

要实现点击一次按钮后禁用的效果，核心是用React的状态来控制按钮的disabled属性，具体步骤如下：

1. 声明状态变量 #

在你的函数组件中，使用useState钩子声明一个状态来跟踪按钮的禁用状态，初始值设为false（按钮默认可用）：

import { useState } from 'react';
import Button from '@mui/material/Button';

function YourComponent() {
  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
  
  // 你的handleAdd函数
  const handleAdd = (course) => {
    // 这里写你原本的添加逻辑
    console.log('添加课程:', course);
  };
  
  // ...其他组件代码
}

2. 修改点击事件并绑定禁用状态 #

在按钮的onClick回调中，先将禁用状态设为true，再执行原本的handleAdd逻辑；同时把disabled属性绑定到这个状态变量上：

<Button 
  variant="contained" 
  onClick={() => {
    setIsButtonDisabled(true);
    handleAdd(course);
  }}
  disabled={isButtonDisabled}
>
  添加课程
</Button>

额外说明 #

如果你的handleAdd是异步函数（比如调用后端API），可以根据异步操作的结果调整禁用状态，比如请求失败时重新启用按钮：

const handleAdd = async (course) => {
  try {
    // 异步请求逻辑
    await api.addCourse(course);
  } catch (error) {
    // 请求失败后重新启用按钮
    setIsButtonDisabled(false);
    console.error('添加失败:', error);
  }
};

内容的提问来源于stack exchange，提问作者MD. Istiak Shamim Shishir