react事件处理

在 React 中，组件内部的事件处理方式和普通的 HTML 元素有所不同。React 将所有事件处理方式都封装到 SyntheticEvent 中，统一进行处理，使得所有事件都可以以相同的方式来处理。

以下是几个基本的事件处理方式：

onClick

处理点击事件的方法是 onClick。可以将 onClick 方法绑定到组件的 DOM 元素上，当元素被点击时，onClick 方法会被调用。

import React from "react";

function handleClick() {
  console.log("Button clicked!");
}

function Button() {
  return <button onClick={handleClick}>Click me!</button>;
}

在上述代码中，handleClick 方法被绑定到按钮的 onClick 属性上，当按钮被点击时，handleClick 方法被调用，控制台会输出 "Button clicked!"。

onChange

处理输入框内容变化的方法是 onChange。可以将 onChange 方法绑定到输入框的 onChange 属性上，当输入框内容变化时，onChange 方法会被调用。

import React, { useState } from "react";

function TextInput() {
  const [text, setText] = useState("");

  function handleTextChange(event) {
    setText(event.target.value);
  }

  return <input type="text" value={text} onChange={handleTextChange} />;
}

在上述代码中，TextInput 组件内使用了 useState 来维护输入框的文本内容，handleTextChange 方法将输入框内容存储到 text 变量中，并通过 value 属性绑定到输入框上。

onSubmit

处理表单提交的方法是 onSubmit。可以将 onSubmit 方法绑定到表单的 onSubmit 属性上，当表单被提交时，onSubmit 方法会被调用。

import React, { useState } from "react";

function Form() {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  function handleSubmit(event) {
    event.preventDefault();
    console.log(`Name: ${name}, Age: ${age}`);
  }

  function handleNameChange(event) {
    setName(event.target.value);
  }

  function handleAgeChange(event) {
    setAge(event.target.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={handleNameChange} />
      <input type="text" value={age} onChange={handleAgeChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

在上述代码中，handleSubmit 方法绑定到表单的 onSubmit 属性上，当表单被提交时，handleSubmit 方法会被调用。handleNameChange 和 handleAgeChange 方法分别用于更新表单中的姓名和年龄字段。在 handleSubmit 方法中，需要调用 event.preventDefault() 方法来阻止表单提交默认行为（即刷新页面）。