react中ref

react中ref

如何使用

ref 是一个入口 允许您直接访问DOM元素或组件实例。
为了使用它们，您可以向组件添加一个ref属性，该属性的值是一个回调函数，它将接收底层的DOM元素或组件的已挂接实例作为其第一个参数。 相当于组件挂载之后触发此回调函数，然后被父组件捕获。我能能够获取到子元素的props，ref等属性进行操作。
另外一种在JSX中通过ref='abc'的方式已经被弃用

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

如何获取真实DOM元素

通过ReactDOM.findDOMNode方法获取真实DOM元素（不建议采用document.getElementById等原生方法） ReactDOM.findDOMNode(ref)