为DOM元素添加Ref
//以下代码使用 ref 去存储 DOM 节点的引用
class Refs extends React.Component{
constructor (props) {
super(props);
//将Ref在构造函数中,配置实例属性。以便整个组件能够访问。
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput(){
//Ref这样理解:是一个储存DOM的引用,
// 使用this.myRef.current来访问Ref,也就是访问DOM节点。
// 注意,这个Ref就是要访问DDM节点用的
const node = this.textInput.current;
console.log(node);
node.focus();
}
render () {
//在 <input> 上关联ref属性,关联到 构造函数 中创建的 `textInput` 上
return(
<div>
<input type="text" ref={this.textInput}/>
<input type="button" value="Focus the text input" onClick={this.focusTextInput}/>
</div>
)
}
}
包装上面的方法:
class AutoFocusTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef(); }
componentDidMount() {
this.textInput.current.focusTextInput(); }
render() {
return (
<CustomTextInput ref={this.textInput} /> );
}
}