React组件无法添加点击事件求助：按钮点击无响应

问题根源 #

1. 组件渲染方式错误：直接调用Button()渲染组件不符合React规范，React无法正确管理组件实例与生命周期。
2. 原生事件监听时机错误：在React完成组件挂载前就执行document.querySelector('button')，此时按钮还未被添加到DOM中，会返回null，导致无法绑定事件——这就是控制台报错的核心原因。同时，React更推荐使用自身的事件系统，而非原生DOM事件操作。

正确实现代码 #

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function Button() {
  // 用状态控制提示信息的显示/隐藏
  const [showMessage, setShowMessage] = useState(false);

  const handleButtonClick = () => {
    setShowMessage(true);
  };

  return (
    <div>
      {/* React标准事件绑定方式 */}
      <button onClick={handleButtonClick}>Masai</button>
      {/* 条件渲染提示信息 */}
      {showMessage && <p>You clicked Masai!</p>}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
// 用JSX标签形式渲染组件
root.render(<Button />);

代码说明 #

• 使用useState钩子管理UI状态，这是React组件处理动态UI变化的标准方式。
• 通过onClick直接在按钮元素上绑定点击事件处理函数，无需操作原生DOM，React会自动处理事件绑定与生命周期同步。
• 利用条件渲染，点击按钮后更新状态，自动触发提示信息的显示，所有UI变化都在组件内部完成，符合React的数据流逻辑。

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