React 事件

摘要: 在本教程中，您将了解 React 事件以及如何将事件处理程序添加到 JSX 元素。

在 React 应用程序中，用户交互会触发事件，例如鼠标点击和表单提交。

React 允许您直接将事件处理程序添加到 JSX 元素。事件处理程序是您希望在响应事件时执行的函数。

添加事件处理程序

要向 JSX 元素添加事件处理程序，请执行以下步骤

• 首先，定义一个函数，或事件处理程序，它将在事件发生时执行。
• 其次，将该函数作为 JSX 元素的 prop 传递。

例如，假设您有一个按钮

const App = () => {
  return <button>Click me</button>;
};

export default App;Code language: JavaScript (javascript)

当您点击按钮时，它还没有做任何事情。

要显示一个警报，当按钮被点击时，您可以执行以下操作

首先，声明一个事件处理程序，例如 handleClick 函数

const handleClick = () => {
    alert('Clicked');
};Code language: JavaScript (javascript)

handleClick 函数显示一个 警报.

其次，将该函数分配给 <button> JSX 元素的 onClick prop

return <button onClick={handleClick}>Click me</button>;Code language: JavaScript (javascript)

以下是完整的代码

const App = () => {
  const handleClick = () => {
    alert('Clicked');
  };

  return <button onClick={handleClick}>Click me</button>;
};

export default App;Code language: JavaScript (javascript)

在有了事件处理程序之后，当您点击按钮时，它将执行 handleClick 函数，该函数会显示一个警报。

按照惯例

• 事件处理程序以 handle 开头，例如 handleClick 和 handleSubmit。
• 事件处理程序 prop 以 on 开头，例如 onClick 和 onSubmit。

通常，事件处理程序会接收一个 event 对象作为参数。event 对象包含有关已发生事件的详细信息。

event 对象是浏览器提供的本机事件对象的包装器，它跨浏览器工作。

以下示例显示了用户更改值时控制台窗口中 input 元素的值

const App = () => {
  const handleChange = (event) => {
    console.log(event.target.value);
  };

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

export default App;Code language: JavaScript (javascript)

在此示例中

首先，定义一个处理 input 元素更改的事件处理程序

const handleChange = (event) => {
    console.log(event.target.value);
};Code language: JavaScript (javascript)

在事件处理程序中，我们将值显示在控制台窗口中。

其次，将事件处理程序分配为 input 元素的 prop

<input type="text" onChange={handleChange} />Code language: JavaScript (javascript)

如果事件处理程序很小，您可以在 JSX 中直接内联定义它。例如

const App = () => {
  return <button onClick={(event) => alert('Clicked')}>Click me</button>;
};

export default App;Code language: JavaScript (javascript)

在此示例中，我们将箭头函数分配为按钮元素的 onClick prop 的 prop

(event) => alert('Clicked')Code language: JavaScript (javascript)

阻止默认行为

某些事件具有默认的浏览器行为。例如，<form> 提交事件默认情况下会重新加载整个页面。

要阻止默认的浏览器行为发生，您可以调用 event 对象方法的 preventDefault() 方法，例如

const App = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form was submitted');
  };
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">
        Email:
        <input type="email" name="email" id="email" />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default App;Code language: JavaScript (javascript)

摘要

• 用户交互会触发 React 应用程序中的事件。
• 定义一个函数或事件处理程序，并将其分配为 JSX 元素的 prop，以响应事件。
• 调用 event 对象方法的 preventDefault() 来阻止不需要的默认浏览器行为。