react如何查看事件

查看 React 事件的方法

使用 console.log 打印事件对象
在事件处理函数中直接打印事件对象，可以查看事件的详细信息。例如：

const handleClick = (event) => {
  console.log('Event details:', event);
};
<button onClick={handleClick}>Click Me</button>

使用 React DevTools 检查事件
通过浏览器开发者工具的 React DevTools 扩展，可以检查组件的 props 和事件处理函数。选中组件后，在右侧面板中查看绑定的 onClick 或其他事件属性。

使用 event.nativeEvent 访问原生事件
React 事件是合成事件（SyntheticEvent），通过 event.nativeEvent 可以访问底层原生 DOM 事件：

const handleClick = (event) => {
  console.log('Native event:', event.nativeEvent);
};

事件属性调试
直接输出特定事件属性，如 event.target、event.type 等：

const handleChange = (event) => {
  console.log('Target value:', event.target.value);
};
<input onChange={handleChange} />

使用 debugger 语句
在事件处理函数中插入 debugger，可以在浏览器中暂停执行并检查事件对象：

const handleSubmit = (event) => {
  debugger; // 浏览器会在此处暂停
  event.preventDefault();
};

注意事项

• React 合成事件会自动回收，异步代码中需调用 event.persist() 保留事件对象。
• 事件对象属性与原生 DOM 事件基本一致，但部分属性可能有差异。