由于 MUI，将值获取到 onClick 处理程序时出现问题答案

【问题标题】：Having an issue getting vaues to onClickHandler Due to MUI由于 MUI，将值获取到 onClick 处理程序时出现问题
【发布时间】：2022-02-13 08:07:33
【问题描述】：

所以我想获得一个包含图标和标签的类别导航。我试过 Chips：

                 {categories.map((category) => (
                    <Chip
                        key={category._id}
                        avatar={<Avatar alt={category.name} src={category.icon} />}
                        label={category.name}
                        variant="outlined"
                        onClick={(e) => handleClick(e)}
                        value={category._id}
                    />
                ))}

我尝试过使用 Tabs -> Tab。但是当 i 时它们不会产生“价值”

const handleClick = (e) => {

    const valueTargeting= e.target.value;
    console.log(valueTargeting);
};

有没有办法使用这些，还是我必须求助于设计一个按钮？另请注意，当单击某个区域（即小表面积）时，它们确实会输出一个“值”。这是我的错误吗？

【问题讨论】：

标签： javascript css material-ui

【解决方案1】：

Chip 没有返回预期的value 是因为Chip 没有明确维护value。为了让它向您的事件处理程序返回一个值，您需要将您希望它返回的值包装在 onClick 处理程序本身中。例如：

{categories.map((category) => {
  return (
    <Chip
      label={category.name}
      // Notice 'category._id' being sent from the handler, not `e`
      onClick={handleClick(category._id})}
    />
  );
})}

工作 MUI 4 代码沙箱：https://codesandbox.io/s/chip-click-mui4-ggl0z?file=/demo.js:940-1325

工作 MUI 5 代码沙箱：https://codesandbox.io/s/chip-click-mui5-y5xkk?file=/demo.js

【讨论】：