react中實現雙向繫結input輸入框值

import React, { Component } from 'react';
class Event extends Component {
  constructor(props) {
    super(props)
    this.state = {
      title: '事件物件練習',
      username: ''
    }
  }
  run = (e) => {
    // alert(this.state.title)
    console.log(e)
    alert(e.target) // 獲取執行當前事件的dom節點
    e.target.style.background = 'red'
    // 獲取自定義屬性
    console.log(e.target.getAttribute('aid'))
  }
  inputChange = (e) => {
    console.log(e.target.value)
    this.setState({
      username: e.target.value
    })
  }
  getInput = () => {
    alert(this.state.username)
  }
  render () {
    return (
      <div>
        <h2>{this.state.title}</h2>
        <h2>{this.state.username}</h2>
        <button aid='123' onClick={this.run}>獲取資料</button>
        <hr />
        <h2>表單事件</h2>
        {/* 獲取表單的值
        1 監聽表單的改變事件
        2 在改變的時間裡面獲取表單輸入的值
        3 把表單輸入的值賦給username this.setState({})
        4 點選按鈕的時候獲取state裡面的username值 this.state.username
         */}
        <input onChange={this.inputChange} /><button aid='123' onClick={this.getInput}>獲取input資料</button>
      </div>
    )
  }
}
export default Event
 

第二種方法，通過ref值獲取

import React, { Component } from 'react';
class List extends Component {
  constructor(props) {
    super(props)
    this.state = {
      title: '事件物件練習',
      username: ''
    }
  }
  run = (e) => {
    // alert(this.state.title)
    console.log(e)
    alert(e.target) // 獲取執行當前事件的dom節點
    e.target.style.background = 'red'
    // 獲取自定義屬性
    console.log(e.target.getAttribute('aid'))
  }
  inputChange = (e) => {
    let value = this.refs.username.value
    console.log(value)
    this.setState({
      username: value
    })
  }
  getInput = () => {
    console.log(this.state.username)
  }
  render () {
    return (
      <div>
        <h2>{this.state.title}</h2>
        <h2>{this.state.username}</h2>
        <button aid='123' onClick={this.run}>獲取資料</button>
        <hr />
        <h2>表單事件</h2>
        {/* 獲取表單的值
        1 監聽表單的改變事件
        2 在改變的時間裡面獲取表單輸入的值
        3 把表單輸入的值賦給username this.setState({})
        4 點選按鈕的時候獲取state裡面的username值 this.state.username
         */}
        <input ref='username' onChange={this.inputChange} /><button aid='123' onClick={this.getInput}>獲取input資料</button>
      </div>
    )
  }
}
export default List
 

有時候想獲取鍵盤輸入

import React, { Component } from 'react';
class List extends Component {
  constructor(props) {
    super(props)
    this.state = {
      title: '事件物件練習',
      username: ''
    }
  }
  run = (e) => {
    // alert(this.state.title)
    console.log(e)
    alert(e.target) // 獲取執行當前事件的dom節點
    e.target.style.background = 'red'
    // 獲取自定義屬性
    console.log(e.target.getAttribute('aid'))
  }
  inputChange = (e) => {
    let value = this.refs.username.value
    console.log(value)
    this.setState({
      username: value
    })
  }
  getInput = () => {
    console.log(this.state.username)
  }
  inputKeyUp = (e) => {
    console.log(e.keyCode)
    if (e.keyCode === 13) {
      alert(e.target.value)
    }
  }
  render () {
    return (
      <div>
        <h2>{this.state.title}</h2>
        <h2>{this.state.username}</h2>
        <button aid='123' onClick={this.run}>獲取資料</button>
        <hr />
        <h2>表單事件</h2>
        {/* 獲取表單的值
        1 監聽表單的改變事件
        2 在改變的時間裡面獲取表單輸入的值
        3 把表單輸入的值賦給username this.setState({})
        4 點選按鈕的時候獲取state裡面的username值 this.state.username
         */}
        <input ref='username' onChange={this.inputChange} /><button aid='123' onClick={this.getInput}>獲取input資料</button>
        <hr />
        <input ref='username' onKeyUp={this.inputKeyUp} /><button aid='123' onClick={this.getInput}>獲取鍵盤輸入資料</button>
      </div>
    )
  }
}
export default List