React 事件

学习onClick · 难度：入门 · +10XP

React 事件处理

React中的事件处理和原生HTML类似，但有几点重要区别。

和原生HTML的区别

原生HTML	React
	命名	onclick	onClick（驼峰命名）
	传值	onclick="fn()"	onClick={fn}（大括号）
	阻止默认	return false	e.preventDefault()
	事件对象	原生Event	合成事件 SyntheticEvent

代码示例

function Button() {
    // 事件处理函数
    const handleClick = () => {
        alert("按钮被点击了！");
    };

    const handleSubmit = (e) => {
        e.preventDefault();  // 阻止表单默认提交行为
        console.log("表单提交");
    };

    return (
        <div>
            {/* onClick 而不是 onclick */}
            <button onClick={handleClick}>点击我</button>

            {/* 内联箭头函数（传参时常用） */}
            <button onClick={() => console.log("Hello")}>打印</button>

            {/* 事件对象 */}
            <form onSubmit={handleSubmit}>
                <button type="submit">提交</button>
            </form>
        </div>
    );
}

为什么onClick={fn} 而不是 onClick={fn()}？

onClick={fn} 传递函数引用，点击时才调用。 onClick={fn()} 会在渲染时立即调用（通常这是错误的！）。

如果要在点击时传参：

<button onClick={() => handleDelete(item.id)}>删除</button>

???? 练习任务

创建一个计数器组件，显示数字和两个按钮（+1 和 -1），点击按钮时更新数字。