事件处理

React 事件处理

事件命名

React 事件使用驼峰命名法（camelCase），而不是小写：

// ❌ HTML 写法
<button onclick="handleClick()">
  点击
</button>

// ✅ React 写法
<button onClick={handleClick}>
  点击
</button>

事件处理函数

基本用法

function Button() {
  const handleClick = (e) => {
    e.preventDefault();
    console.log('按钮被点击');
  };

  return <button onClick={handleClick}>点击我</button>;
}

传递参数

function Button() {
  const handleClick = (id, e) => {
    e.preventDefault();
    console.log('点击了按钮', id);
  };

  return (
    <button onClick={(e) => handleClick(1, e)}>
      点击我
    </button>
  );
}

// 或者使用箭头函数包装
const handleClick = (id) => {
  return (e) => {
    console.log('点击了按钮', id);
  };
};

<button onClick={handleClick(1)}>点击我</button>;

常用事件

onClick 事件

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? '开启' : '关闭'}
    </button>
  );
}

onChange 事件

function Input() {
  const [value, setValue] = useState('');

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="输入内容"
    />
  );
}

onSubmit 事件

function LoginForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('提交:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={formData.username}
        onChange={(e) => setFormData({...formData, username: e.target.value})}
        placeholder="用户名"
      />
      <input
        type="password"
        value={formData.password}
        onChange={(e) => setFormData({...formData, password: e.target.value})}
        placeholder="密码"
      />
      <button type="submit">登录</button>
    </form>
  );
}

条件渲染

三元运算符

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>欢迎回来！</h1> : <h1>请先登录</h1>}
    </div>
  );
}

逻辑与运算符

function WarningBanner({ warn }) {
  if (!warn) return null;

  return (
    <div className="warning">
      警告！
    </div>
  );
}

// 或使用 &&
function WarningBanner({ warn }) {
  return (
    <div>
      {warn && <div className="warning">警告！</div>}
    </div>
  );
}

列表渲染

map() 方法

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

带索引的列表

function NumberList() {
  const numbers = [1, 2, 3, 4, 5];

  return (
    <ul>
      {numbers.map((number, index) => (
        <li key={index}>
          第 {index + 1} 项: {number}
        </li>
      ))}
    </ul>
  );
}

💡 最佳实践

1. 使用箭头函数：保持简洁
2. 阻止默认行为：必要时调用 preventDefault()
3. 不要在渲染中定义函数：使用 useCallback 优化
4. 列表必须有 key：使用稳定且唯一的标识符

🎯 练习

1. 创建一个待办事项应用，支持添加、删除、切换完成状态
2. 实现一个简单的计算器
3. 创建一个下拉菜单组件

下一节我们将学习 表单处理和验证！