React学习之旅----获取表单输入的值，双向绑定

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