子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

React 事件处理 ​

React 提供了一套简单易用的事件处理机制，使得在组件中处理用户交互变得非常直观。通过使用合成事件，React 还提供了额外的功能，如自动绑定和事件池。掌握 React 事件处理对于开发高效的用户界面至关重要。

1. 基本事件处理 ​

在 React 中，可以通过在元素上绑定事件处理器来处理基本的事件，如点击、键盘输入等。事件处理器通常是组件方法，它们被绑定到特定的事件类型。

1.1 绑定事件处理器 ​

要将事件处理器绑定到元素，可以使用on前缀加上事件名称作为属性。例如，要处理点击事件，可以添加onClick属性。

jsx
class MyButton extends React.Component {
  handleClick() {
    console.log("按钮被点击了");
  }

  render() {
    return <button onClick={this.handleClick}>点击我</button>;
  }
}

在上面的代码中，handleClick方法被绑定到按钮的点击事件。当用户点击按钮时，控制台会输出"按钮被点击了"。

1.2 传递参数给事件处理器 ​

有时候，需要在事件处理器中访问额外的数据。可以通过在绑定事件处理器时传递参数来实现。

案例: 1. 绑定事件处理器 onClick ​

js
// 案例: 1. 绑定事件处理器 onClick
class App extends React.Component {
  handleClick() {
    alert("按钮被点击了");
  }
  render() {
    return (
      <p>
        onClick-<button onClick={this.handleClick}>点击我</button>
      </p>
    );
  }
}
const app = ReactDOM.createRoot(document.querySelector("#app1"));
app.render(<App />);

案例: 2. 绑定事件处理器 onChange ​

js
// 案例: 2. 绑定事件处理器 onChange
const { useRef } = React;
function App() {
  const onChange = (e) => alert("输入框的值：" + e.target.value);
  return (
    <p>
      onChange-
      <input type="text" onChange={onChange} />
    </p>
  );
}
const app = ReactDOM.createRoot(document.querySelector("#app2"));
app.render(<App />);

案例: 3. 绑定事件处理器 onSubmit ​

js
// 案例: 3. 绑定事件处理器 onSubmit
function App() {
  const onSubmit = (event) => {
    event.preventDefault(); // 阻止表单提交的默认行为
    alert("表单已提交");
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        onSubmit-<button type="submit">提交</button>
      </form>
    </div>
  );
}
const app = ReactDOM.createRoot(document.querySelector("#app3"));
app.render(<App />);

案例: 4. 绑定事件处理器 onBlur ​

js
// 案例: 4. 绑定事件处理器 onBlur
const { useRef } = React;
function App() {
  const inputRef = useRef(null);
  const onBlur = (event) => alert("输入框失去焦点");
  return (
    <p>
      onBlur-
      <input type="text" onBlur={onBlur} ref={inputRef} />
    </p>
  );
}
const app = ReactDOM.createRoot(document.querySelector("#app4"));
app.render(<App />);

在上面的代码中，handleItemClick方法接收一个item参数，表示被点击的列表项。通过使用箭头函数，可以将item传递给事件处理器。

2. 合成事件 ​

React 使用合成事件（SyntheticEvent）来模拟原生浏览器事件。合成事件具有与原生事件相同的接口，但它们提供了额外的功能，如自动绑定和事件池。

2.1 自动绑定 ​

在 React 中，事件处理器会被自动绑定到组件实例。这意味着在事件处理器内部，可以直接访问组件的其他方法和状态。

案例: 5. 绑定事件处理器 onClick-遍历传参 ​

js
// 案例: 5. 绑定事件处理器 onClick-遍历传参
const { useRef } = React;
function App() {
  const list = ["苹果", "香蕉", "橙子"];
  const onClick = (item) => alert("点击了：" + item);
  return (
    <p>
      onClick-遍历传参-
      {list.map((o, i) => (
        <button key={i} onClick={() => onClick(o)}>
          {o}{" "}
        </button>
      ))}
    </p>
  );
}
const app = ReactDOM.createRoot(document.querySelector("#app5"));
app.render(<App />);

在上面的代码中，handleChange方法被自动绑定到输入框的更改事件。当用户输入内容时，组件的状态会被更新。

2.2 事件池 ​

为了提高性能，React 使用事件池来重用合成事件对象。因此，不应该在事件处理器中直接修改事件对象。如果需要获取事件的额外信息，可以使用event.nativeEvent属性。

3. 代码与演示 ​

以下是一个简单的 React 组件生命周期的代码案例：

1. 全部代码 ​

点击查看代码
html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>13.test-react-event</title>
    <!-- <script src="https://cdn.staticfile.org/react/18.0.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.0.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script>
  </head>

  <body>
    <div id="app1"></div>
    <div id="app2"></div>
    <div id="app3"></div>
    <div id="app4"></div>
    <div id="app5"></div>

    <script type="text/babel">
      (function () {
        // 案例: 1. 绑定事件处理器 onClick
        class App extends React.Component {
          handleClick() {
            alert("按钮被点击了");
          }
          render() {
            return (
              <p>
                onClick-<button onClick={this.handleClick}>点击我</button>
              </p>
            );
          }
        }
        const app = ReactDOM.createRoot(document.querySelector("#app1"));
        app.render(<App />);
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 2. 绑定事件处理器 onChange
        const { useRef } = React;
        function App() {
          const onChange = (e) => alert("输入框的值：" + e.target.value);
          return (
            <p>
              onChange-
              <input type="text" onChange={onChange} />
            </p>
          );
        }
        const app = ReactDOM.createRoot(document.querySelector("#app2"));
        app.render(<App />);
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 3. 绑定事件处理器 onSubmit
        function App() {
          const onSubmit = (event) => {
            event.preventDefault(); // 阻止表单提交的默认行为
            alert("表单已提交");
          };
          return (
            <div>
              <form onSubmit={onSubmit}>
                onSubmit-<button type="submit">提交</button>
              </form>
            </div>
          );
        }
        const app = ReactDOM.createRoot(document.querySelector("#app3"));
        app.render(<App />);
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 4. 绑定事件处理器 onBlur
        const { useRef } = React;
        function App() {
          const inputRef = useRef(null);
          const onBlur = (event) => alert("输入框失去焦点");
          return (
            <p>
              onBlur-
              <input type="text" onBlur={onBlur} ref={inputRef} />
            </p>
          );
        }
        const app = ReactDOM.createRoot(document.querySelector("#app4"));
        app.render(<App />);
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 5. 绑定事件处理器 onClick-遍历传参
        const { useRef } = React;
        function App() {
          const list = ["苹果", "香蕉", "橙子"];
          const onClick = (item) => alert("点击了：" + item);
          return (
            <p>
              onClick-遍历传参-
              {list.map((o, i) => (
                <button key={i} onClick={() => onClick(o)}>
                  {o}{" "}
                </button>
              ))}
            </p>
          );
        }
        const app = ReactDOM.createRoot(document.querySelector("#app5"));
        app.render(<App />);
      })();
    </script>
  </body>
</html>

2. 案例演示 ​




test-react-event.html 资源加载中...