React函数式组件内Button的onClick事件无法触发求助

你的代码逻辑本身是正确的，点击按钮没反应大概率是以下几个常见问题导致，按顺序排查：

• 检查浏览器控制台是否开启
  你的deleteHandler函数里是用console.log输出日志，这个内容只会显示在浏览器控制台（按F12打开），不会在页面上有任何视觉变化。如果没开控制台，自然看不到反馈。

• 排查按钮是否被元素遮挡
  可能CSS样式导致按钮被其他div覆盖，无法触发点击事件。打开浏览器开发者工具（F12），用元素选择器选中Delete按钮，查看它的实际可点击区域是否正常，或者检查父元素是否有pointer-events: none这类禁用点击的样式。

• 重启React开发服务器
  有时候开发服务器会出现热更新失效的情况，代码修改后没有同步到页面。终端按Ctrl+C停止服务，重新运行npm start或yarn start，刷新页面后再测试。

• 确认函数绑定写法（你的代码已正确）
  你直接将deleteHandler传给onClick的写法是正确的，不需要加括号（如果写成onClick={deleteHandler()}会导致组件渲染时就执行函数，反而点击时无反应）。你的代码在这一步没有问题。

你的代码参考 #

App.js：

import Todo from "./components/Todo.js";

function App() {
  return (
    <>
      <h1>Todos</h1>
      <Todo title="1st todo" />
      <Todo title="2nd todo" />
      <Todo title="3rd todo" />
      <Todo title="4th todo" />
    </>
  );
}

export default App;

Todo.js：

function Todo(props) {
    
  function deleteHandler() {
    console.log("U just deleted!");
  }

  return (
    <div className="card">
      <div className="content-card">
        <div>
          <h2>{props.title}</h2>
        </div>
        <div>
          <button type="button" className="btn" onClick={deleteHandler}>
            Delete
          </button>
        </div>
      </div>
    </div>
  );
}

export default Todo;

内容的提问来源于stack exchange，提问作者Farah