Back

reactjs - 4. this.refs 获得某个元素 (html element)

发布时间: 2023-08-08 04:48:00

方法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来获得实例。

Back