React用户交互事件

在React中处理用户交互事件（如点击、输入、提交等）的方式与原生JavaScript类似，但有一些语法差异和最佳实践。以下是常见交互事件的处理方法及代码示例：

一、基本事件处理（点击、输入等）

1. 点击事件（onClick）

import React, { useState } from 'react';const ButtonExample = () => {const [count, setCount] = useState(0);// 事件处理函数const handleClick = () => {setCount(count + 1);};return (<button onClick={handleClick}>  {/* 绑定事件 */}Click me: {count}</button>);
};

2. 输入事件（onChange）

const InputExample = () => {const [text, setText] = useState('');const handleChange = (event) => {setText(event.target.value);  // 获取输入值};return (<inputtype="text"value={text}  // 受控组件onChange={handleChange}/>);
};

3. 表单提交（onSubmit）

const FormExample = () => {const [name, setName] = useState('');const handleSubmit = (event) => {event.preventDefault();  // 阻止默认提交行为console.log('Submitted:', name);};return (<form onSubmit={handleSubmit}><inputtype="text"value={name}onChange={(e) => setName(e.target.value)}/><button type="submit">Submit</button></form>);
};

二、传递参数给事件处理函数

方法1：使用箭头函数

const ListItem = ({ id, text }) => {const handleDelete = () => {console.log('Deleting item:', id);// 调用父组件的删除函数};return (<li>{text}<button onClick={() => handleDelete(id)}>  {/* 传递参数 */}Delete</button></li>);
};

方法2：使用bind

<button onClick={handleDelete.bind(this, id)}>Delete
</button>

三、事件委托（处理多个子元素）

当需要处理多个相似元素的事件时，推荐使用事件委托：

const ColorSelector = () => {const [selectedColor, setSelectedColor] = useState('');const handleColorClick = (color) => {setSelectedColor(color);};const colors = ['red', 'green', 'blue'];return (<div><p>Selected: {selectedColor}</p>{colors.map(color => (<buttonkey={color}style={{ background: color }}onClick={() => handleColorClick(color)}  {/* 统一处理 */}>{color}</button>))}</div>);
};

四、高级事件处理

1. 键盘事件（onKeyDown）

const KeyPressExample = () => {const handleKeyDown = (event) => {if (event.key === 'Enter') {console.log('Enter key pressed!');}};return (<inputtype="text"onKeyDown={handleKeyDown}/>);
};

2. 自定义事件组件

创建可复用的事件处理组件：

// CustomButton.js
const CustomButton = ({ onClick, children }) => {return (<buttonclassName="custom-button"onClick={onClick}  {/* 暴露事件接口 */}>{children}</button>);
};// 使用自定义按钮
const App = () => {const handleClick = () => {console.log('Custom button clicked!');};return (<CustomButton onClick={handleClick}>Click me</CustomButton>);
};

五、注意事项

1. 事件名称使用驼峰命名：

   • HTML：onclick → React：onClick
   • HTML：onchange → React：onChange

2. 避免直接修改DOM：
   不要使用 document.getElementById()，而是通过状态管理更新UI。

3. 受控组件 vs 非受控组件：

   • 受控组件：值由React管理（如上面的输入框示例）
   • 非受控组件：使用 ref 获取DOM值（适用于文件上传等场景）

// 非受控组件示例
const FileInput = () => {const fileInput = useRef(null);const handleSubmit = (event) => {event.preventDefault();console.log('File:', fileInput.current.files[0]);};return (<form onSubmit={handleSubmit}><input type="file" ref={fileInput} /><button type="submit">Submit</button></form>);
};