React 事件

就像 HTML DOM 事件一样，React 可以根据用户事件执行操作。

React 具有与 HTML 相同的事件：单击、更改、鼠标悬停等。

添加事件

React 事件以驼峰语法编写：

onClick代替onclick。

React 事件处理程序写在大括号内：

onClick={shoot}代替onClick="shoot()"。

React：

<button onClick={shoot}>Take the Shot!</button>

HTML：

<button onclick="shoot()">Take the Shot!</button>

例子：

放在shoot里面的函数Football成分：

function Football() {
  const shoot = () => {
    alert("Great Shot!");
  }

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

运行示例 »

传递参数

要将参数传递给事件处理程序，请使用箭头函数。

例子：

将 "Goal!" 作为参数发送到shoot函数，使用箭头函数：

function Football() {
  const shoot = (a) => {
    alert(a);
  }

  return (
    <button onClick={() => shoot("Goal!")}>Take the shot!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

运行示例 »

React事件对象

事件处理程序可以访问触发该函数的 React 事件。

在我们的示例中，事件是"click" 事件。

例子：

箭头功能：手动发送事件对象：

function Football() {
  const shoot = (a, b) => {
    alert(b.type);
    /*
    'b' represents the React event that triggered the function,
    in this case the 'click' event
    */
  }

  return (
    <button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

运行示例 »

当我们查看时这会派上用场形式在后面的章节中。

码农教程 - 一技在手,衣食无忧!

React 事件

添加事件

React：

HTML：

例子：

传递参数

例子：

React事件对象

例子：

通过练习测试一下

练习: