react 获取 input 的值

1.通过 onChange -- e.target.value

class App extends Component {
  state = {
    username: '张三'
  };
  // 用户名
  getUserName(e){
    console.log(e.target.value);
    this.setState({
      username: e.target.value
    });
    console.log(this.state.username); // setState为异步,存在延迟
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.getUserName.bind(this)} />
      </div>
    );
  }
}

2.通过 ref -- this.refs.name

/**
 * ref 用于对DOM进行操作,不建议频繁使用
 */
import React, { Component } from 'react';

// 创建类
class HelloMessage extends Component {
  handleClick(){
    this.refs.myText.focus();
    console.log(this.refs.myText.value);
  }

  render(){
    return (
      <div>
        <input type="text" ref="myText" />
        <button onClick={() => this.handleClick()}>click</button>
      </div>
    );
  }
}

// 通过继承的方式创建类
class App extends Component {
  render() {
    return (
      <HelloMessage />
    );
  }
}

export default App;

或

/**
 * ref 回调 
 */
import React, { Component } from 'react';

// 创建类
class HelloMessage extends Component {
  handleClick(){
    this.myText.focus();
    console.log(this.myText.value);
  }

  render(){
    return (
      <div>
        <input type="text" ref={(dom) => {this.myText = dom}} />
        <button onClick={() => this.handleClick()}>click</button>
      </div>
    );
  }
}

// 通过继承的方式创建类
class App extends Component {
  render() {
    return (
      <HelloMessage />
    );
  }
}

export default App;

.