自定义React组件怎么正确传递和触发事件？

成立提问于 2026-03-20 11:12:18 阅读 4

组件

我写了个按钮组件，想在父组件里监听点击事件，但点按钮没反应，是我哪里写错了吗？

我试过在子组件里用props.onClick()，也试过把onClick直接传给button元素，但都不行。

function MyButton({ onClick }) {
  return <button onClick={onClick}>点我</button>;
}

// 父组件
function App() {
  const handleClick = () => console.log('clicked!');
  return <MyButton onClick={handleClick} />;
}

我来解答赞 2 收藏

反馈

1 条解答

闲人乐萱 Lv1

你的代码示例其实是正确的，这样写应该能工作。

如果点按钮没反应，可能是这几个地方有问题：

1. 检查一下组件名大小写，React组件必须大写开头，比如 MyButton 而不是 myButton

2. 确认 props 确实传进来了，可以在子组件里加个 console.log 调试一下

3. 看看是不是有其他地方把事件覆盖了

如果想更稳健一点，可以加个防御性编程：

function MyButton({ onClick, children }) {

  const handleClick = (e) => {

    // 这里可以加一些通用逻辑

    if (onClick) {

      onClick(e);

    }

  };

  

  return ;

}

然后父组件这样用：

function App() {

  const handleClick = (e) => console.log('clicked!', e);

  return 点我;

}

你实际运行的代码和这个示例有出入吗？可以把你的完整代码贴出来看看，问题可能出在别的地方。

2026-03-20 11:14