React Refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上，用于访问在 render 方法中创建的 DOM 节点或 React 元素

1.字符串 refs

使用方法
绑定一个 ref 属性到 render 的返回值上：

<input ref="myInput" />
在其它代码中，通过 this.refs 获取支撑实例:

var input = this.refs.myInput;
var inputValue = input.value;

export default class Mycomponent extends PureComponent  {
  constructor(props){
    super(props)
    this.state={}
  }
  handleClick = () =>{
    let inputRefs = this.refs.refTest.value
    console.log(inputRefs)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>获取input的value</button>
        refs: <input ref="refTest" />
      </div>
    )
  }
}

字符串 refs 在 React v16 版本中被移除

2.React.createRef()

 创建 Refs

(通过 ref 属性来获得 React 元素。当构造组件时，refs 通常被赋值给实例的一个属性，这样你可以在组件中任意一处使用它们)

export default class Mycomponent extends PureComponent  {
  constructor(props){
    super(props)
    this.state={}
    this.myRef = React.createRef()
  }
  handleClick = () =>{
    let inputRefs = this.myRef.current.value
    console.log(inputRefs)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>获取input的value</button>
        refs: <input ref={this.myRef} />
      </div>
    )
  }
}

 

访问 Refs

当一个 ref 属性被传递给一个 render 函数中的元素时，可以使用 ref 中的 current 属性对节点的引用进行访问

let inputRefs = this.myRef.current.value

除了在input上使用也可以在其他元素上使用

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  render() {
    return <div ref={this.myRef} />
  }
}

注：你不能在函数式组件上使用 ref 属性，因为它们没有实例，但是，你可以在函数式组件内部使用 ref，只要它指向一个 DOM 元素或者 class 组件