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;

.