React 事件处理

事件处理

绑定事件

采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写onclick, React里的事件是驼峰onClick，React的事件并不是原生事件，而是合成事件。

事件handler的写法 【 王牌 || 王者】

1. 直接在render里写行内的箭头函数(不推荐)

import React, {Component } from 'react'
class Event extends Component{
constructor(){
super()
this.state={
flag:false
}
}
render(){
return (
<div>
<button onClick={ () => {
this.setState({
flag:!this.state.flag
})
} }>切换</button>
<hr/>
{ this.state.flag && <img src="/img/timg.jpg" alt=""></img> }
</div>
)
}
}
export default Event

2. 在组件内使用箭头函数定义一个方法(推荐)

import React, {Component } from 'react'
class Event extends Component{
constructor(){
super()
this.state={
flag:false
}
}
change = () => {
this.setState({
flag:!this.state.flag
})
}
render(){
return (
<div>
<button onClick={ this.change }>切换</button>
<hr/>
{ this.state.flag && <img src="/img/timg.jpg" alt=""></img> }
</div>
)
}
}
export default Event

3. 直接在组件内定义一个非箭头函数的方法，然后在render里直接使用onClick={this.handleClick.bind(this)}(不推荐)

import React, {Component } from 'react'
class Event extends Component{
constructor(){
super()
this.state={
flag:false
}
}
change () {
this.setState({
flag:!this.state.flag
})
}
render(){
return (
<div>
<button onClick={ this.change.bind(this) }>切换</button>
<hr/>
{ this.state.flag && <img src="/img/timg.jpg" alt=""></img> }
</div>
)
}
}
export default Event

4. 直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this)(推荐)

import React, {Component } from 'react'
class Event extends Component{
constructor(){
super()
this.state={
flag:false
}
this.change=this.change.bind(this)
}
change () {
this.setState({
flag:!this.state.flag
})
}
render(){
return (
<div>
<button onClick={ this.change }>切换</button>
<hr/>
{ this.state.flag && <img src="/img/timg.jpg" alt=""></img> }
</div>
)
}
}
export default Event

Event 对象

和普通浏览器一样，事件handler会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的，而是它自己内部所构建的。它同样具有event.stopPropagation、event.preventDefault 这种常用的方法
​ 事件对象中的值很多都是null,但是可以正常使用

事件的参数传递

1. 在render里调用方法的地方外面包一层箭头函数

import React, {Component } from 'react'
class Event extends Component{
constructor(){
super()
this.state={
flag:false,
msg:''
}
}
change = (val) => {
// console.log(e.clientY)
this.setState({
flag:!this.state.flag,
msg:val
})
}
render(){
return (
<div>
<button onClick={ () =>{ this.change(1000) } }>切换</button>
<p> msg:{this.state.msg} </p>
<hr/>
{ this.state.flag && <img src="/img/timg.jpg" alt=""></img> }
</div>
)
}
}
export default Event

2. 在render里通过this.handleEvent.bind(this, 参数)这样的方式来传递

import React, {Component } from 'react'
class Event extends Component{
constructor(){
super()
this.state={
flag:false,
msg:''
}
}
change = (val) => {
// console.log(e.clientY)
this.setState({
flag:!this.state.flag,
msg:val
})
}
render(){
return (
<div>
<button onClick={this.change.bind(this,1000) } >切换</button>
<p> msg:{this.state.msg} </p>
<hr/>
{ this.state.flag && <img src="/img/timg.jpg" alt=""></img> }
</div>
)
}
}
export default Event

3. 通过event传递

4. 比较推荐的是做一个子组件, 在父组件中定义方法，通过props传递到子组件中，然后在子组件件通过this.props.method来调用

import React,{ Component } from 'react';
import './App.css';
import Event from './event/event' 

class App extends Component{
  constructor(){
    super()
    this.state={
      kick:'给你一脚'
    }
  }
  kickHandle = ( val ) => {
    this.setState({
      kick:'你给我一脚，我就(╥╯^╰╥)'+ val
    })
  }
  render(){
     return (
      <div>
        <Event kick={this.state.kick} kickHandle={this.kickHandle}/>
      </div>
   );
  }
}

export default App;

import React, {Component } from 'react'

class Event extends Component{
   
    constructor(){
        super()
        this.state={
            flag:false,
            msg:''
        }
    }
    change = (val) =>  {
        // console.log(e.clientY)
        this.setState({
            flag:!this.state.flag,
            msg:val
        })
    }
    render(){
        return (
            <div>
                <button onClick={this.change.bind(this,1000) } >切换</button>
                <button onClick={ ()=>{this.props.kickHandle('一天')} }>kick</button>
                <p>kick:{this.props.kick}</p>
                <p> msg:{this.state.msg} </p>
                <hr/>
                { this.state.flag && <img src="/img/timg.jpg" alt=""></img> }
            </div>
        )
    }
}


export default Event

处理用户输入

案例一：事件访问input里value值实现双向绑定

import React, {Component } from 'react'
class Event extends Component{
constructor(){
super()
this.state={
flag:false,
msg:''
}
}
changeMsg = (e) => {
this.setState({
msg:e.target.value // 通过事件访问input的值 实现数据的双向绑定
})
}
render(){
return (
<div>
<input type="text" onInput={this.changeMsg}/>
<p>msg:{this.state.msg}</p>
</div>
)
}
}
export default Event

案例二：通过在input输入框绑定ref,定义一个普通属性user，然后在方法上通过this.refs.user.value访问属性获取value值实现双向绑定

import React, {Component } from 'react'
class Event extends Component{
constructor(){
super()
this.state={
flag:false,
msg:''
}
}
changeMsg = () => {
console.log(this)
this.setState({
msg:this.refs.user.value
})
}
render(){
return (
<div>
<input type="text" onInput={this.changeMsg} ref="user"/>
<p>msg:{this.state.msg}</p>
</div>
)
}
}
export default Event

案例三：通过ref以函数形式在input上绑定属性 在方法中通过this.user属性访问实现数据的双向绑定

import React, {Component } from 'react'
class Event extends Component{
constructor(){
super()
this.state={
flag:false,
msg:''
}
}
changeMsg = () => {
console.log(this)
this.setState({
msg:this.user.value
})
}
render(){
return (
<div>
<input type="text" onInput={this.changeMsg} ref={ el => this.user = el}/>
{/* el就是当前input元素 在input上绑定一个this.user属性 */}
<p>msg:{this.state.msg}</p>
</div>
)
}
}
export default Event