1.キーボードフォーカスを指定されたボタンにリセットします。
// 我们先在一个 class 组件的 JSX 中创建一个元素的 ref:
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// 创造一个 textInput DOM 元素的 ref
this.textInput = React.createRef();
}
render() {
// 使用 `ref` 回调函数以在实例的一个变量中存储文本输入 DOM 元素
//(比如,this.textInput)。
return (
<input
type="text"
ref={this.textInput}
/>
);
}
}
// 然后我们就可以在需要时于其他地方把焦点设置在这个组件上:
focus() {
// 使用原始的 DOM API 显式地聚焦在 text input 上
// 注意:我们通过访问 “current” 来获得 DOM 节点
this.textInput.current.focus();
}
次に、親コンポーネントは、子コンポーネントの要素にフォーカスを設定する必要があります。
子コンポーネントに 特別なprop を設定して親コンポーネントのrefを子ノードのDOMノードに渡すことにより、DOM refを親コンポーネントに公開できます。