React 事件处理

事件处理

绑定事件

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

事件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.stopPropagationevent.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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值