尝试在用户单击按钮后禁用该按钮,但通过处理程序函数。
我参考过这两个类似的问题:React Material UI:禁用时如何为按钮提供自定义颜色? https://stackoverflow.com/questions/55586626/react-material-ui-how-to-give-a-button-a-custom-color-when-disabled/56520516
使用材质 UI 更改反应选择中的禁用属性 https://stackoverflow.com/questions/56637567/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 https://material-ui.com/components/buttons/显示禁用按钮:
<Button variant="outlined" disabled>
Upload
</Button>