React Material-UI 禁用处理程序中的按钮

Question

尝试在用户单击按钮后禁用按钮，但来自处理函数。

我参考了这两个类似的问题： React Material UI: How to give a button a custom color when disabled? Change disable attribute in react select with material UI

我认为更改颜色会是一个很好的练习步骤，但没有奏效。当我使用 color='primary' 时，按钮是蓝色的，这就是我想要的初始状态。但是，当页面加载时，该按钮现在是灰色的（看起来已禁用，但鼠标仍然可以点击它）。

我原来的蓝色按钮：

 <Button id='UploadButton' onClick={uploadButtonClicked} 
         variant="contained" color="primary">Upload</Button>

我修改后的按钮（尝试使用状态作为颜色）：

 <Button id='UploadButton' onClick={uploadButtonClicked} 
         disabled="{uploadButtonDisabled}" 
         variant="contained" 
         color="{uploadButtonColor}">Upload</Button>

我的状态和处理程序：

       const [uploadButtonColor, setUploadButtonColor] =
React.useState('primary');   
       const [uploadButtonDisabled,
setUploadButtonDisabled] = React.useState('false');
      
       const uploadButtonClicked = () => {
          // will post data to a REST API here, then disable the button 
          setUploadButtonColor('red')
          setUploadButtonDisabled('true')
      }

我是否需要使用颜色模式使它看起来被禁用，或者我可以只添加禁用的单词，或者将禁用设置为 true？

这是the doc 显示禁用按钮的方式：

<Button variant="outlined" disabled>
    Upload 
</Button>

Answer 1

不要在属性/替换值周围加上引号 disabled={isDisabled} not disabled='{isD​​isabled}' （与颜色相同）。

你可以用这个：

import Button from "@material-ui/core/Button";

function SampleButtons(props) {
  let [isDisabled, setIsDisabled] = React.useState(false)
  return (
    <React.Fragment>
      <Button variant="contained" onClick={() => setIsDisabled(true)} disabled={isDisabled}>Button</Button>
    </React.Fragment>
  );
}