React 中ref的 React.createRef() 方法

作者: 小李不小 | 来源:发表于2019-10-27 21:28 被阅读0次

React.createRef 和 React.forwardR
React 中ref的 React.createRef() 方法
React refs
ReactJs中获取dom元素
react 之 ref
React.createRef
react学习（18）createRef形式的ref
react ref
React中ref的使用
React中的Ref

React.createRef()

在React 16.3版本后，使用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的current属性将能拿到dom节点或组件的实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- 构造函数创建组件 -->
<div id="example"></div>
<script type="text/babel">

class MyComponent extends React.Component {

constructor(){
 super()
    this.myInput = React.createRef();
}
// .React.createRef()在React 16.3版本后，使用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的current属性将能拿到dom节点或组件的实例

  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(  //把组件放到 div 里面去
  <MyComponent/>,
  document.getElementById('example')
);




</script>

</body>
</html>

image.png