React 事件处理

交互靠事件驱动：点击、输入、提交、键盘操作等。React 事件与原生 DOM 事件很接近，但在命名与绑定方式上有明确的约定差别。学会事件处理，界面才能真正"响应"用户的操作。

事件名与写法约定

React 事件名采用驼峰命名（onClick、onChange），绑定的值必须是函数而不是字符串：

function App() {
  function handleClick() {
    console.log('按钮被点击')
  }
  return <button onClick={handleClick}>点我</button>
}

注意传的是函数本身 handleClick，不能写成 handleClick()，否则函数会在渲染时立刻执行，而不是点击时才执行。

事件对象 e

事件处理函数能收到一个合成事件对象（SyntheticEvent），用法与原生事件一致，常用 e.preventDefault() 阻止默认行为：

function SubmitForm() {
  function handleSubmit(e) {
    e.preventDefault() // 阻止表单提交导致的页面刷新
    console.log('提交了表单')
  }
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">提交</button>
    </form>
  )
}

给处理函数传参数

需要额外参数时，用箭头函数在外面包一层：

function ColorList() {
  const colors = ['红', '绿', '蓝']
  function pick(color) {
    console.log('选中了', color)
  }
  return (
    <ul>
      {colors.map(c => (
        <li key={c} onClick={() => pick(c)}>颜色 {c}</li>
      ))}
    </ul>
  )
}

类组件中 this 的绑定

普通类方法作为事件处理函数时 this 会丢失，最省事的做法是把它定义成箭头函数属性，或用箭头函数包裹调用：

import { Component } from 'react'
class Counter extends Component {
  state = { count: 0 }
  handleClick = () => {
    this.setState({ count: this.state.count + 1 })
  }
  render() {
    return <button onClick={this.handleClick}>点击 {this.state.count}</button>
  }
}

事件里更新状态：受控组件

事件最常见的用途是修改 state，让界面跟随用户操作。以输入框为例，onChange 里读取 e.target.value 再写回 state，输入框就变成了"受控组件"：

import { useState } from 'react'
function SearchBox() {
  const [text, setText] = useState('')
  return (
    <input
      value={text}
      onChange={e => setText(e.target.value)}
      placeholder="请输入关键词"
    />
  )
}

用户在输入框敲字时，value 被同步进 state，界面与数据始终保持一致。

小结：React 事件三要点——驼峰命名并传函数引用；需要参数时用箭头函数包一层；类组件记得用箭头函数属性绑定 this。配合 setState / useState，就能做出各种交互效果。