AddCircleIcon 材质 ui 禁用不工作答案

【问题标题】：AddCircleIcon material ui disabled not workingAddCircleIcon 材质 ui 禁用不工作
【发布时间】：2021-08-07 08:21:26
【问题描述】：

AddCircleIcon 按钮的禁用功能不起作用，但 onClick 功能正常工作。另外，如果我直接将 true 传递给 disabled 属性，它仍然不起作用。我需要帮助来解决这个问题。提前致谢。

字段标签是自定义输入标签。

AddCircleIcon 属于 Material UI=>

import AddCircleIcon from '@material-ui/icons/AddCircle';

const [moreLinks, updateMore] = useState([]);

const addMore = () => {
  updateMore([{name: 'more data', value: ''}]);
};

const disableAddMore = React.useMemo(() => {
 return moreLinks.length >= 1;
}, [moreLinks]);

<Fields
  name='moreDate'
  center={true}
  register={register}
  extraComponent={
    <AddCircleIcon
       onClick={addMore}
       disabled={disableAddMore}
       className={classes.addIcon}
    />
  }
/>

这个例子也不行

<Fields
  name='moreDate'
  center={true}
  register={register}
  extraComponent={
    <AddCircleIcon
       onClick={addMore}
       disabled={true}
       className={classes.addIcon}
    />
  }
/>

【问题讨论】：

这是您上一个问题here 的复制/粘贴，并添加了“字段标签是自定义输入标签。”。请不要删除并问同样的问题，这可能被认为是插队。

标签： javascript reactjs material-ui

【解决方案1】：

如果您检查icon docs，您会发现它们不直接使用onClick 或disabled 属性，但它们扩展了根native element，所以这就是onClick 处理程序仍然存在的原因有效。

我相信您想用按钮包裹图标，以使 disabled 道具工作。存在一个扩展 BaseButton 的 IconButton。

import { IconButton } from "@material-ui/core";
import AddCircleIcon from '@material-ui/icons/AddCircle';

...

const [moreLinks, updateMore] = useState([]);

const addMore = () => {
  updateMore([{name: 'more data', value: ''}]);
};

const disableAddMore = React.useMemo(() => {
 return moreLinks.length >= 1;
}, [moreLinks]);

<Fields
  name='moreDate'
  center={true}
  register={register}
  extraComponent={
    <IconButton
      onClick={addMore}
      disabled={disableAddMore}
    >
      <AddCircleIcon className={classes.addIcon} />
    </IconButton>
  }
/>

【讨论】：