Question

这让我发疯了。 onClick处理程序会触发次要点击。我不知道为什么。功能组件非常简单，可以正常工作。该组件是另一个组件的一部分。所以是个孩子父组件在列表中。这就是整个设置。如果我第一次单击，我会在调试中看到不会触发该事件。第一次单击时，IconButton的样式范围正在更改。奇怪

const MoreInfo = () => {
  const [more_info, setMore_info] = useState("test");
  const handleExpand = event => {
    if (icon_expand === "expand_more") {
      setMore_info("test2");
    }
  };

  return (
    <IconButton onClick={handleExpand} aria-label="location" size="small">
      <Icon style={{ fontSize: 12 }}>{icon_expand} </Icon>
    </IconButton>
  );
};
export default MoreInfo;

Answer 1

实际上，它确实按预期工作。

我只是将您的代码复制粘贴到了codeandbox中，它确实可以here使用。

https://codesandbox.io/s/zen-dan-d5r8r

但是，正如您提到的，整个组件树及其任何父组件的子组件。

所以我想，您应该检查其中的一些：

检查父级的onClick，并确保它与任何其他onClick（name）没有冲突。
确保状态更新正常进行
检查所有方法是否已绑定（仅在适用的情况下）

IconButton可以在点击按钮时使用

1 个答案: