React event object (event), form events, keyboard events, react similarly vue two-way data binding

event.target

• Button to change the color by event, obtaining property 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

Form events

• Form data acquisition method:

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

• Form data acquired second method (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

Keyboard Events

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

vue react similar two-way data binding

• model changes affect view, view the effect of changing 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