前言
在本节中，我们将了解 React 中用于 HTML 元素（例如按钮和输入元素）的事件处理程序。你将学习如何使用带有 onClick 事件的按钮，以及如何定义和使用不同类型的事件处理程序。本质上，我们将介绍三种事件处理程序：事件处理程序、内联事件处理程序和回调事件处理程序。
React中的事件处理程序
首先，我们将从 React 中针对特定 onClick 事件处理程序的按钮示例开始。这是关于如何在 React 中使用事件处理程序（也称为事件处理程序函数或处理程序）处理事件的最基本示例。按钮具有接收函数的 onClick 属性。每次触发事件时都会调用此函数（此处：单击按钮时）：
import React from 'react';
function App() {
function handleClick() {
console.log('Button click ...');
}
return (
<div>
<button type="button" onClick={handleClick}>
Event Handler
</button>
</div>
);
}
对于其他属性，如 onChange（onChange 事件处理程序）和 onSubmit（onSubmit 事件处理程序），它的工作方式类似。对于初学者来说，onClick 经常不起作用，因为他们没有传递函数，而是直接在 JSX 中调用函数。例如，在下一个版本中，事件处理程序仅在第一次渲染组件时被调用一次。其他每一次单击都不会调用事件处理函数，因为函数的返回值用于 onClick 属性而不是函数本身。所以没有什么可调用的；除非函数返回另一个函数：
import React from 'react';
function App() {
function handleClick() {
console.log('Button click ...');
}
// don't do this
return (
<div>
<button type="button" onClick={handleClick()}>
Event Handler
</button>
</div>
);
}
通过使用 JavaScript 箭头函数，可以使事件处理函数更加简洁。不过，这是一个可选步骤。就个人而言，我喜欢将事件处理程序作为箭头函数：
import React from 'react';
function App() {
const handleClick = () => {
console.log('Button click ...');
};
return (
<div>
<button type="button" onClick={handleClick}>
Event Handler
</button>
</div>
);
}
但是一旦更多的事件处理程序在 React 组件中添加，通过再次给它们函数语句来使它们与其他变量更容易区分是很好的：
import React from 'react';
function App() {
const user = {
id: '123abc',
username: 'Robin Wieruch',
};
function handleUserSignIn() {
// do something
}
function handleUserSignUp() {
// do something
}
function handleUserSignOut() {
// do something
}
...
}
毕竟，onClick 事件的事件处理程序应该实现一些业务逻辑。在本例中，React 的 useState Hook 用于通过 onClick 按钮事件更新某些状态：
import React from 'react';
function App() {
const [count, setCount] = React.useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
Count: {count}
<button type="button" onClick={handleClick}>
Increase Count
</button>
</div>
);
}
下一个示例向你展示了一个输入字段而不是一个按钮。在那里，我们使用的是始终作为第一个参数传递给事件处理函数的实际事件。该事件是来自 React 的合成事件，它本质上封装了原生 HTML 事件并在其之上添加了一些功能。每次有人使用事件的目标属性输入输入字段时，此事件都会为你提供输入字段的值：
import React from 'react';
function App() {
const [text, setText] = React.useState('');
function handleChange(event) {
setText(event.target.value);
}
return (
<div>
<input type="text" onChange={handleChange} />
{text}
</div>
);
}
以前我们没有使用过该事件，因为在我们的按钮示例中我们不需要它。在输入字段示例中，我们需要它。最后但同样重要的是，不要忘记将值传递给输入元素以使其成为受控组件：
import React from 'react';
function App() {
const [text, setText] = React.useState('');
function handleChange(event) {
setText(event.target.value);
}
return (
<div>
<input type="text" value={text} onChange={handleChange} />
{text}
</div>
);
}
简而言之，这就是事件处理程序。让我们了解 React 中更高级的处理程序。
React 中的内联事件处理程序
内联事件处理程序，也称为内联处理程序，通过直接在 JSX 中使用事件处理程序为我们提供了许多新选项：
import React from 'react';
function App() {
const [count, setCount] = React.useState(0);
return (
<div>
Count: {count}
<button
type="button"
onClick={function() {
setCount(count + 1);
}}
>
Increase Count
</button>
</div>
);
}
在 JSX 中使用通用函数语句虽然很冗长。因此，JavaScript 箭头函数可以方便地定义更简洁的内联处理程序：
import React from 'react';
function App() {
const [count, setCount] = React.useState(0);
return (
<div>
Count: {count}
<button
type="button"
onClick={() => setCount(count + 1)}
>
Increase Count
</button>
</div>
);
}
一般来说，开发者都是懒惰的人，所以经常使用内联事件处理程序来避免在 JSX 之外进行额外的函数声明。然而，这会将大量业务逻辑转移到 JSX 中，这使得它的可读性、可维护性和易错性降低。就个人而言，我喜欢在没有内联事件处理程序的情况下保持 JSX 干净，并在 JSX 之外声明事件处理程序。 内联处理程序也用于将参数传递给在 JSX 之外定义的更通用的处理程序：
import React from 'react';
function App() {
const [count, setCount] = React.useState(0);
function handleCount(delta) {
setCount(count + delta);
}
return (
<div>
Count: {count}
<button type="button" onClick={() => handleCount(1)}>
Increase Count
</button>
<button type="button" onClick={() => handleCount(-1)}>
Decrease Count
</button>
</div>
);
}
这样，也可以并行传递事件和参数。即使在此示例中不需要它，但你肯定会在将来遇到需要该事件的一种或另一种情况（例如 React Forms 的 preventDefault ）：
import React from 'react';
function App() {
const [count, setCount] = React.useState(0);
function handleCount(event, delta) {
setCount(count + delta);
}
return (
<div>
Count: {count}
<button type="button" onClick={event => handleCount(event, 1)}>
Increase Count
</button>
<button type="button" onClick={event => handleCount(event, -1)}>
Decrease Count
</button>
</div>
);
}
因此，当你需要传递事件和参数时，例如当你需要为 onClick 事件提供额外参数时，内联事件处理程序可能会为你提供帮助。然后 JSX 之外的更通用的事件处理程序可以使用这个额外的参数。
React 中的回调事件处理程序
简而言之，有回调事件处理程序或回调处理程序。当子组件需要与父组件通信时使用它们。由于 React props 只在组件树中向下传递，因此使用回调处理程序（其核心是一个函数）进行向上通信：
import React from 'react';
function App() {
const [text, setText] = React.useState('');
// 1
function handleTextChange(event) {
setText(event.target.value); // 3
}
return (
<div>
<MyInput inputValue={text} onInputChange={handleTextChange} />
{text}
</div>
);
}
// 2
function MyInput({ inputValue, onInputChange }) {
return (
<input type="text" value={inputValue} onChange={onInputChange} />
);
}
回调处理程序在某处定义 (1)，在其他地方使用 (2)，但回调到其定义的位置 (3)。这样，就可以从子组件到父组件进行通信。回调处理程序通过 React props 向下传递，并在调用函数时向上通信。
你已经了解了 React 的事件处理程序、内联事件处理程序和回调事件处理程序，以及如何在按钮中为它们的 onClick 事件和在输入字段中为它们的 onChange 事件使用它们。还有其他事件处理程序，例如表单元素的 onSubmit，实际上需要该事件来阻止本机浏览器行为。无论如何，所有这些事件处理程序都有其特定目的。你的目标应该是让你的代码保持可读性和可维护性，
在下一个示例中尝试一下，当单击内部 HTML 元素时，两个事件处理程序都会被触发。如果单击外部 HTML 元素，则仅触发外部元素的事件处理程序：
反之，当容器元素被显式点击时（在这种情况下不太可能没有任何进一步的样式），只有容器的事件处理程序会触发。这里容器元素上的 stopPropagation() 有点多余，因为它上面没有事件处理程序。
下面我们将使用 React Router 重新创建这个场景。为了说明这是如何工作的，以及如何自己在 React 中逐步实现嵌套路由，我们将从以下示例开始：
如果没有 /profile 和 /account 路由匹配（例如 /user/settings），你将只看到 User 组件出现。为避免这种情况，你可以添加索引和无匹配路由的组合。之后，默认路由将是 /profile 路由：
我们这里安装的是6.0.2版本。
当你在浏览器中启动 React 应用程序时，你应该能够单击两个 Link 组件，这些组件应该将你导航到各自的路由。单击这些链接时，可通过检查浏览器的当前 URL 来确认。接下来，我们需要使用 React Router 的 Route 组件将路由映射到实际渲染：