React事件对象（event）、表单事件、键盘事件、react类似vue的双向数据绑定

event.target

• 通过event来改变button颜色、获取dom属性

import React, { Component } from 'react'

class getDom extends Component {
  constructor(props){
    super(props)
    this.state = {
      msg: 'msgmsgmsg'
    }
  }
  run=(event)=>{
    // 改变button的 颜色
    event.target.style.background="red";
    // 获取dom的属性
    console.log(event.target.getAttribute('aid'))
  }
  render() {
    return (
      <div>
         <button aid="btnclick" onClick={this.run}>点击按钮</button>
      </div>
    )
  }
}

export default getDom

表单事件

• 获取表单数据的方法一：

import React, { Component } from 'react'
class FromComponent extends Component {
  
  constructor(props){
      super(props)
      this.state ={
        username: ''
      }
  }
  // 监听input事件
  changeInput=(event)=>{
    console.log(event.target.value)
    this.setState({
      username: event.target.value
    })
  }
  // 触发button按钮获取input的值
  getInput=()=>{
    alert(this.state.username)
  }
  render() {
    return (
      <div>
        from
        <input onChange={this.changeInput} /> <button onClick={this.getInput}>获取input框的值</button>
        
      </div>
    )
  }
}
export default FromComponent

• 获取表单数据的方法二（ref）：

import React, { Component } from 'react'
class RefComponent extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       username: ''
    }
  }

  changeInput=()=>{
    let val = this.refs.username.value;
    console.log(val)
    this.setState({
      username: val
    })
  }

  getList=()=>{
    alert(this.state.username)
  }
  
  render() {
    return (
      <div>
        <input type="text"  ref="username" onChange={this.changeInput} /> <button onClick={this.getList}>获取数据</button>
      </div>
    )
  }
}

export default RefComponent

键盘事件

import React, { Component } from 'react'

class KeyCodeComponent extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       username: ''
    }
  }

  inputKeyUp=(e)=>{
      if(e.keyCode == 13) {
          alert(this.state.username)
      }
  }
  inputKeyDown=(e)=>{
     if(e.keyCode == 13){
        alert(this.state.username)
	 }
  }

  InputChange=(event)=>{
        let val = event.target.value;
        this.setState({
            username: val
        })
  }
  
  render() {
    return (
      <div>
        <input onKeyUp={this.inputKeyUp}  onChange={this.InputChange} />
        <input onKeyDown={this.inputKeyDown}  onChange={this.InputChange} />
      </div>
    )
  }
}

export default KeyCodeComponent

react类似vue的双向数据绑定

• model改变影响view,view改变影响model

import React, { Component } from 'react'

class BidirectionalComponent extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       val: 'anmoxin'
    }
  }
  inputChange=(event)=>{
     this.setState({
         val: event.target.value
     })
  }
  setUsername=()=>{
      this.setState({
          val:'安沫昕'
      })
  }
  
  render() {
    return (
      <div>
          <input value={this.state.val} onChange={this.inputChange} />
          <p>{this.state.val}</p>
          <button onClick={this.setUsername}>改变username</button>
      </div>
    )
  }
}

export default BidirectionalComponent