作为道具传递下来的onClick方法没有执行答案

【问题标题】：onClick method passed down as prop isn't executing作为道具传递下来的onClick方法没有执行
【发布时间】：2021-02-03 02:33:58
【问题描述】：

在 App.js 标头组件中使用 useState 设置状态：

const [showAddTask, setShowAddTask] = useState(false);

由 App.js 返回：

  <div>
    <Header onAdd={() => setShowAddTask(!showAddTask)} />
    {showAddTask && <AddTask />}
  </div>

头组件：

const Header = ({ onAdd }) => {
  return (
    <header>
      <Button onClick={onAdd} />
    </header>
  );
};

当单击 Header 组件中的按钮时，我希望显示关联的表单（由 AddTask 组件返回），因为它的值应该设置为 true（与其默认值相反），这应该会导致它呈现感谢短路条件{showAddTask && <AddTask />}，但没有任何反应。

如果我将 showAddTask 的默认值设置为 true，则表单会显示。

可能是什么原因？在 Chrome 开发者工具中，我只收到“[HMR] Waiting for update signal from WDS...”

Repo with full code

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

寻找你的回购，问题是 - 你正在使用自定义 <Button> 组件，它不处理 onClick 事件。

https://github.com/nataliecardot/react-task-tracker/blob/master/src/components/Button.js - 第 7 行

将onClick 处理程序添加到<button> 元素应该会有所帮助

const Button = ({ color, text, onClick }) => {
  return (
    <button style={{ backgroundColor: color }} className="btn" onClick={onClick}>
      {text}
    </button>
  );
};

【讨论】：