[react] ref 的常用方法 获取input的值

使用方法一

<input type="text" ref={input=>this.yjwInput=input} onChange={this.inputChange} />

// 其它地方获取 input 元素 ：this.yjwInput
this.yjwInput.value

使用方法二

<input type="text" ref='yjwInput' onChange={this.inputChange} />

// 其它地方获取该 input 元素 ：this.refs.yjwInput
this.refs.yjwInput.value

使用方法三: createRef

// 第一步，创建ref： this.yjwInput = createRef();
// 第二步，关联元素：<input ref = {this.yjwInput} />
// 第三步，获取元素 this.yjwInput.current：this.yjwInput.current.select()。
import React, { Component, createRef } from 'react';

class TestCreateRef extends Component {
  constructor(props) {
    super(props);
    this.state = {val: ''};
    this.yjwInput = createRef();
  }

  refFocus = () => {
    this.yjwInput.current.select()
  }
  changeValue = e => {
    this.setState({val: e.target.value});
  }

  render() { 
    return ( 
      <div>
        <h1 onClick={this.refFocus}>点击获取输入框焦点</h1>
        
        <input 
          ref = {this.yjwInput}
          value = {this.state.val}
          onChange = {this.changeValue}
        />
      </div> 
    );
  }
}
 
export default TestCreateRef;

---

参考：
​​​React 中，ref 的常用方法​​