)"
* [`onWaiting`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/waiting_event):一个 [`Event` 处理](#event-handler) 函数。由于临时缺少数据而导致播放停止时触发。
* `onWaitingCapture`:一个在 [捕获阶段](/learn/responding-to-events#capture-phase-events) 触发的 `onWaiting` 版本。
-#### 注意事项 {/*common-caveats*/}
+#### 注意事项 {/*common-caveats*/}
- 你不能同时传递 `children` 和 `dangerouslySetInnerHTML`。
- 有些事件(像 `onAbort` 和 `onLoad`) 在浏览器中不冒泡,但是在 React 中冒泡。
---
-### `ref` 回调函数 {/*ref-callback*/}
+### `ref` 回调函数 {/*ref-callback*/}
你可以将一个函数传递给`ref` 属性,而不是像 [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref)) 返回的那样使用 ref 对象。
@@ -256,17 +256,17 @@ title: "普通组件(例如
)"
当你传递不同的` ref `回调时,React 也会调用你的 `ref` 回调。在上面的示例中,`(node) => { ... }` 在每次渲染时都是一个不同的函数。当组件重新渲染时,先前的函数将被调用并带有 `null` 参数,并且下一个函数将被调用并带有 DOM 节点。
-#### 参数 {/*ref-callback-parameters*/}
+#### 参数 {/*ref-callback-parameters*/}
* `node`:一个 DOM 节点或`null`。当 ref 被附加时 React 会将 DOM 节点传递给你,当引用被分离时值为 `null`。除非你在每次渲染时都传递相同的函数引用作为 `ref` 回调,否则该回调将在组件的每次重新渲染期间被暂时分离和重新连接。
-#### 返回 {/*returns*/}
+#### 返回 {/*returns*/}
不要从 `ref` 回调函数中返回任何内容。
---
-### React 事件对象 {/*react-event-object*/}
+### React 事件对象 {/*react-event-object*/}
你的事件处理程序将接收到一个 React 事件对象。它有时也被称为“合成事件”(synthetic event)。
@@ -280,7 +280,7 @@ title: "普通组件(例如
)"
一些 React 事件不能直接映射到浏览器的原生事件。例如,在 `onMouseLeave` 事件中,`e.nativeEvent` 将指向 `mouseout` 事件。具体的映射关系不是公共 API 的一部分,可能会在未来发生变化。如果你需要某些原因下层浏览器事件,请从 `e.nativeEvent` 中读取它。
-#### 属性 {/*react-event-object-properties*/}
+#### 属性 {/*react-event-object-properties*/}
React 事件对象实现了一些标准的[`事件`](https://developer.mozilla.org/zh-CN/docs/Web/API/Event)属性:
@@ -297,7 +297,7 @@ React 事件对象实现了一些标准的[`事件`](https://developer.mozilla.o
* `nativeEvent`:一个 DOM[`事件`](https://developer.mozilla.org/zh-CN/docs/Web/API/Event)。原始的浏览器事件对象。
-#### 方法 {/*react-event-object-methods*/}
+#### 方法 {/*react-event-object-methods*/}
React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.org/zh-CN/docs/Web/API/Event) 方法:
@@ -311,13 +311,13 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
* `persist()`:不适用于 React DOM。在 React Native 中,调用此函数以读取事件后的属性。
* `isPersistent()`:不适用于 React DOM。在 React Native 中,返回是否已调用 `persist`。
-#### 注意事项 {/*react-event-object-caveats*/}
+#### 注意事项 {/*react-event-object-caveats*/}
* `currentTarget`、`eventPhase`、`target` 和 `type` 的值反映了你的 React 代码所期望的值。在幕后,React 在根处附加事件处理程序,但这不会反映在 React 事件对象中。例如,e.currentTarget 可能与底层 e.nativeEvent.currentTarget 不同。对于 polyfill 的事件,e.type(React 事件类型)可能与 e.nativeEvent.type(底层类型)不同。
---
-### `AnimationsEvent` 处理函数 {/*animationsevent-handler*/}
+### `AnimationsEvent` 处理函数 {/*animationsevent-handler*/}
一个用于 [CSS 动画](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations) 事件的事件处理程序类型。
@@ -329,7 +329,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
/>
```
-#### 参数 {/*animationevent-handler-parameters*/}
+#### 参数 {/*animationevent-handler-parameters*/}
* `e`:带有这些额外 [`animationevent`](https://developer.mozilla.org/zh-CN/docs/Web/API/animationevent) 属性的 [React事件对象](#react-event-object):
* [`animationName`](https://developer.mozilla.org/zh-CN/docs/Web/API/animationevent/animationName)
@@ -338,7 +338,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
---
-### `ClipboardEvent` 处理函数 {/*clipboadevent-handler*/}
+### `ClipboardEvent` 处理函数 {/*clipboadevent-handler*/}
一个用于 [Clipboard_API](https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard_API) 事件的处理程序类型。
@@ -350,7 +350,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
/>
```
-#### 参数 {/*clipboadevent-handler-parameters*/}
+#### 参数 {/*clipboadevent-handler-parameters*/}
* `e`:一个带有这些额外 [`ClipboardEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/ClipboardEvent) 属性的 [React事件对象](#react-event-object):
@@ -358,7 +358,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
---
-### `CompositionEvent` 处理函数 {/*compositionevent-handler*/}
+### `CompositionEvent` 处理函数 {/*compositionevent-handler*/}
一个用于 [输入法编辑器(IME)](https://developer.mozilla.org/zh-CN/docs/Glossary/Input_method_editor) 的事件处理程序类型。
@@ -370,14 +370,14 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
/>
```
-#### 参数 {/*compositionevent-handler-parameters*/}
+#### 参数 {/*compositionevent-handler-parameters*/}
* `e`:一个具有这些额外[`CompositionEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/CompositionEvent) 属性的 React 事件对象
* [`data`](https://developer.mozilla.org/zh-CN/docs/Web/API/CompositionEvent/data)
---
-### `DragEvent` 处理 {/*dragevent-handler*/}
+### `DragEvent` 处理 {/*dragevent-handler*/}
一个 [HTML Drag 和 Drop API] (https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API) 事件的一个事件处理程序类型。
@@ -402,7 +402,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
>
```
-#### 参数 {/*dragevent-handler-parameters*/}
+#### 参数 {/*dragevent-handler-parameters*/}
* `e`:一个带有这些额外的 [`DragEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/DragEvent) 属性的 [React事件对象](#react-event-object):
* [`dataTransfer`](https://developer.mozilla.org/zh-CN/docs/Web/API/DragEvent/dataTransfer)
@@ -433,7 +433,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
---
-### `FocusEvent` 处理函数 {/*focusevent-handler*/}
+### `FocusEvent` 处理函数 {/*focusevent-handler*/}
一个用于焦点事件的事件处理程序类型。
@@ -446,7 +446,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
[看一个例子](#handling-focus-events)。
-#### 参数 {/*focusevent-handler-parameters*/}
+#### 参数 {/*focusevent-handler-parameters*/}
* `e`:一个有额外 [`FocusEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/FocusEvent) 属性的 [React事件对象](#react-event-object):
* [`relatedTarget`](https://developer.mozilla.org/zh-CN/docs/Web/API/FocusEvent/relatedTarget)
@@ -458,17 +458,17 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
---
-### `Event` 处理函数 {/*event-handler*/}
+### `Event` 处理函数 {/*event-handler*/}
一个通用事件的事件处理程序类型。
-#### 参数 {/*event-handler-parameters*/}
+#### 参数 {/*event-handler-parameters*/}
* `e`:一个没有额外属性的 [React 事件对象](#react-event-object)。
---
-### `InputEvent` 处理函数 {/*inputevent-handler*/}
+### `InputEvent` 处理函数 {/*inputevent-handler*/}
一个用于 `onBeforeInput` 事件的事件处理程序类型。
@@ -476,14 +476,14 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
console.log('onBeforeInput')} />
```
-#### 属性 {/*inputevent-handler-parameters*/}
+#### 属性 {/*inputevent-handler-parameters*/}
* `e`:一个带有这些额外 [`InputEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/InputEvent) 属性的 [React 事件对象](#react-event-object):
* [`data`](https://developer.mozilla.org/zh-CN/docs/Web/API/InputEvent/data)
---
-### `KeyboardEvent` 处理函数 {/*keyboardevent-handler*/}
+### `KeyboardEvent` 处理函数 {/*keyboardevent-handler*/}
一个用于键盘事件的事件处理程序类型。
@@ -496,7 +496,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
[看一个例子](#handling-keyboard-events)。
-#### 参数 {/*keyboardevent-handler-parameters*/}
+#### 参数 {/*keyboardevent-handler-parameters*/}
* `e`:一个带有这些额外的 [`KeyboardEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent) 属性的 [React event object](#react-event-object):
* [`altKey`](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/altKey)
@@ -520,7 +520,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
---
-### `MouseEvent` 处理函数 {/*mouseevent-handler*/}
+### `MouseEvent` 处理函数 {/*mouseevent-handler*/}
一个用于鼠标事件的事件处理程序类型。
@@ -537,7 +537,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
[看一个例子](#handling-mouse-events)。
-#### 参数 {/*mouseevent-handler-parameters*/}
+#### 参数 {/*mouseevent-handler-parameters*/}
* `e`:一个具有这些额外 [`鼠标事件`](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent) 属性的 [React event object](#react-event-object):
* [`altKey`](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/altKey)
@@ -564,7 +564,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
---
-### `PointerEvent` 处理函数 {/*pointerevent-handler*/}
+### `PointerEvent` 处理函数 {/*pointerevent-handler*/}
一个 [pointer events](https://developer.mozilla.org/zh-CN/docs/Web/API/Pointer_events) 的事件处理程序类型。
@@ -580,7 +580,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
[看一个例子](#handling-pointer-events)。
-#### 参数 {/*pointerevent-handler-parameters*/}
+#### 参数 {/*pointerevent-handler-parameters*/}
* `e`:具有这些额外 [`PointerEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/PointerEvent) 属性的 [React event object](#react-event-object):
* [`height`](https://developer.mozilla.org/zh-CN/docs/Web/API/PointerEvent/height)
@@ -620,7 +620,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
---
-### `TouchEvent` 处理函数 {/*touchevent-handler*/}
+### `TouchEvent` 处理函数 {/*touchevent-handler*/}
一个用于 [touch events](https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events) 的事件处理程序类型。
@@ -633,7 +633,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
/>
```
-#### 参数 {/*touchevent-handler-parameters*/}
+#### 参数 {/*touchevent-handler-parameters*/}
* `e`:一个带有这些额外的 [`TouchEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent) 属性的 [React event object](#react-event-object):
* [`altKey`](https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent/altKey)
@@ -652,7 +652,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
---
-### `TransitionEvent` 处理函数 {/*transitionevent-handler*/}
+### `TransitionEvent` 处理函数 {/*transitionevent-handler*/}
一个用于 CSS 过渡的事件处理程序类型。
@@ -662,7 +662,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
/>
```
-#### 参数 {/*transitionevent-handler-parameters*/}
+#### 参数 {/*transitionevent-handler-parameters*/}
* `e`:一个带有这些额外 [`TransitionEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/TransitionEvent) 属性的 [React 事件对象](#react-event-object):
* [`elapsedTime`](https://developer.mozilla.org/zh-CN/docs/Web/API/TransitionEvent/elapsedTime)
@@ -671,7 +671,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
---
-### `UIEvent` 处理函数 {/*uievent-handler*/}
+### `UIEvent` 处理函数 {/*uievent-handler*/}
一个通用 UI 事件的事件处理程序类型。
@@ -681,7 +681,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
/>
```
-#### 参数 {/*uievent-handler-parameters*/}
+#### 参数 {/*uievent-handler-parameters*/}
* `e`:一个带有这些额外 [`UIEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/UIEvent) 属性的 [React 事件对象](#react-event-object):
* [`detail`](https://developer.mozilla.org/zh-CN/docs/Web/API/UIEvent/detail)
@@ -689,7 +689,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
---
-### `WheelEvent` 处理函数 {/*wheelevent-handler*/}
+### `WheelEvent` 处理函数 {/*wheelevent-handler*/}
一个用于 `onWheel` 事件的事件处理程序类型。
@@ -699,7 +699,7 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
/>
```
-#### 参数 {/*wheelevent-handler-parameters*/}
+#### 参数 {/*wheelevent-handler-parameters*/}
* `e`:带有这些额外 [`WheelEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/WheelEvent) 属性的 [React 事件对象](#react-event-object):
* [`deltaMode`](https://developer.mozilla.org/zh-CN/docs/Web/API/WheelEvent/deltaMode)
@@ -734,9 +734,9 @@ React 事件对象实现了一些标准的 [`事件`](https://developer.mozilla.
---
-## Usage {/*usage*/}
+## Usage {/*usage*/}
-### 应用 CSS 样式 {/*applying-css-styles*/}
+### 应用 CSS 样式 {/*applying-css-styles*/}
在 React 中,你可以使用 [`className`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/className) 指定 CSS 类。它的工作方式类似于 HTML 中的 `class` 属性:
@@ -812,7 +812,7 @@ export default function Avatar({ user }) {
-#### 如何有条件地应用多个 CSS 类? {/*how-to-apply-multiple-css-classes-conditionally*/}
+#### 如何有条件地应用多个 CSS 类? {/*how-to-apply-multiple-css-classes-conditionally*/}
要有条件地应用 CSS 类,你需要使用 JavaScript 自己生成 `className` 字符串。
@@ -854,7 +854,7 @@ function Row({ isSelected, size }) {
---
-### 使用 ref 操作 DOM 节点 {/*manipulating-a-dom-node-with-a-ref*/}
+### 使用 ref 操作 DOM 节点 {/*manipulating-a-dom-node-with-a-ref*/}
有时候,你需要获取与 JSX 标签相关联的浏览器 DOM 节点。举个例子,当你希望在点击一个按钮的时候聚焦一个 ``,你需要在浏览器的`` DOM 节点上调用 [`focus()`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/focus) 方法。
@@ -904,7 +904,7 @@ export default function Form() {
---
-### 危险地设置内部 HTML {/*dangerously-setting-the-inner-html*/}
+### 危险地设置内部 HTML {/*dangerously-setting-the-inner-html*/}
你可以像这样将原始的 HTML 字符串传递给元素:
@@ -1002,7 +1002,7 @@ HTML 中嵌入的代码将会运行。黑客可以利用这个安全漏洞窃取
---
-### 处理鼠标事件 {/*handling-mouse-events*/}
+### 处理鼠标事件 {/*handling-mouse-events*/}
这个例子展示了一些常见的 [鼠标事件](#mouseevent-handler) 以及它们触发的时机。
@@ -1049,7 +1049,7 @@ input { margin-left: 10px; }
---
-### 处理指针事件 {/*handling-pointer-events*/}
+### 处理指针事件 {/*handling-pointer-events*/}
这个例子展示了一些常见的 [指针事件](#pointerevent-handler) 以及它们触发的时机。
@@ -1097,7 +1097,7 @@ input { margin-left: 10px; }
---
-### 处理焦点事件 {/*handling-focus-events*/}
+### 处理焦点事件 {/*handling-focus-events*/}
在 React 中,[焦点事件](#focusevent-handler) 冒泡。你可以使用 `currentTarget` 和 `relatedTarget` 来区分焦点或模糊事件是否起源于父元素之外。该示例展示了如何检测子元素的聚焦、父级元素的聚焦,以及如何检测整个子树的聚焦进入或离开。
@@ -1153,7 +1153,7 @@ input { margin-left: 10px; }
---
-### 处理键盘事件 {/*handling-keyboard-events*/}
+### 处理键盘事件 {/*handling-keyboard-events*/}
这个例子展示了一些常见的 [键盘事件](#keyboardevent-handler) 以及它们触发的时机。