reactjs - 4. this.refs 获得某个元素 (html element)
访问量: 47
方法1
refer to:
https://www.runoob.com/react/react-refs.html
react中可以根据this.refs来获得某个html element,作用跟jQuery("#id") 是基本一样的。
具体见下面的例子。
class MyComponent extends React.Component {
handleClick() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
}
render() {
// 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
方法2
refer to: https://legacy.reactjs.org/docs/refs-and-the-dom.html
也可以通过 this.myRef = React.createRef();
来创建某个 ref, 然后在DOM中使用
差别是 后者可以使用 .current来获得实例。