如果在 material-ui 最新版本中禁用 listItem，则触发 OnClick 事件

问题描述

ListItem 被禁用，onClick 事件仍然触发。

  <ListItem disabled onClick={() => { alert("clicked") }}>
        </ListItem>

如何在禁用 ListItem 时限制 onClick 事件？

解决方法

disabled 属性仅适用于表单元素。这意味着除非您的元素是 <button> 或 <input type="button">，否则 disabled 属性将无效。

通过使用 React State 可以实现这一点

const [disabledList,setDisabledList] = React.useState(true);

      <ListItem
          disabled={disabledList}
          onClick={() => {
            if (disabledList) {
              return;
            } else {
              alert("clicked");
            }
          }}
        />

然后让它不禁用setDisabledList(false)