React Refs

使用方法
1. 绑定一个 ref 属性到 render 的返回值
2. this.refs 获取支撑

React笔记

使用方法

绑定一个 ref 属性到 render 的返回值

<input ref="myInput" />

this.refs 获取支撑

var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();

<body>
<div id="example"></div>
<script type="text/babel">
class MyNameIsStitch extends React.Component {
  handleClick() {
    {/*  使用原生的 DOM API 获取焦点  */} 
    this.refs.myInput.focus();
  }
  render() {
    {/*  当组件插入到 DOM 后, ref 属性添加一个组件的引用于到 this.refs  */} 
    return (
      <div>
      {/*  可以通过使用 this 来获取当前 React 组件, 或使用 ref 来获取组件的引用  */} 
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick.bind(this)}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <MyNameIsStitch />,
  document.getElementById('example')
);
</script>
</body>

查看效果

作者: 我叫史迪奇
本文来自于: https://sdq3.link/React-Refs.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议