创建ref
使用 React.createRef()
创建 refs,通过 ref
属性来获得 React 元素。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}
访问 Refs
当一个 ref 属性被传递给一个 render
函数中的元素时,可以使用 ref 中的 current
属性对节点的引用进行访问。
const node = this.myRef.current;
Demo
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// 创建 ref 存储 textInput DOM 元素
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
// 直接使用原生 API 使 text 输入框获得焦点
// 注意:通过 "current" 取得 DOM 节点
this.textInput.current.focus();
}
render() {
// 告诉 React 我们想把 <input> ref 关联到构造器里创建的 `textInput` 上
return (
<div>
<input
type="text"
ref={this.textInput} />
<input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}
不能在函数式组件上使用 ref
属性,因为它们没有实例
function MyFunctionalComponent() {
return <input />;
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
render() {
// 这将 *不会* 工作!
return (
<MyFunctionalComponent ref={this.textInput} />
);
}
}
回调 Refs
这种形式在实际中用的比较多
class Parent extends React.Component {
render() {
return (
<input
ref={el => this.inputElement = el}
/>
);
}
}
旧版 API:String 类型的 Refs
如果你之前使用过 React ,你可能了解过之前的API中的 string 类型的 ref 属性,比如 “textInput” ,你可以通过 this.refs.textInput 访问DOM节点。我们不建议使用它,因为 String 类型的 refs 存在问题。它已过时并可能会在未来的版本被移除。如果你目前还在使用 this.refs.textInput 这种方式访问 refs ,我们建议用回调函数的方式代替。