React 事件处理

修改状态需要用 setState({修改的属性:值},回调)

jsx

onClick={()=>{this}} // 箭头函数指向 react
onClick={this.fn.bind(this)} // 普通函数指向类本身，需要 bind 绑定
// 或声明函数时
getData = () => {
  console.log(this);
}

类 ----

jsx

constructor() {
  super()
  this.state = {
    tag : true,
    arr : ['z1','z2'],
    age : 10
  }
}

render ----

jsx

{ this.state.age }
<button onClick={
  () => { this.setState({ age: this.state.age + 1 }, 
    ()=>{console.log(this.state.age)}) 
  }
}
>age++</button>

事件对象

es5 方式 event 会隐式传递，es6 手动传递 ev。接收形参都在函数的最后一个参数

jsx

<button onClick={this.getEvent.bind(this,11)}>getEventES5</button>
<button onClick={(ev) => this.getEvent(11,ev)}>getEventES6</button>

模拟Vue双向绑定

jsx

valChange = (e) => {
  this.setState({
    txt : e.target.value
  })
}
<input type="text" value={this.state.txt} onChange={this.valChange}/>
<div>{this.state.txt}</div>

React 事件处理 ​

事件对象 ​

模拟Vue双向绑定 ​

评论 #

React 事件处理

事件对象

模拟Vue双向绑定

评论