React 为按钮绑定事件

写代码的小哥哥

于 2020-02-12 16:01:44 发布

阅读量2.9k

点赞数

分类专栏： react

本文链接：https://blog.youkuaiyun.com/qq_36249659/article/details/104277970

版权

react 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了在React中如何为按钮组件绑定事件，包括使用箭头函数、传递参数以及通过callback方法获取数据等关键步骤，帮助开发者更好地理解React事件处理机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件

import React from 'react'

export default class BindEvent extends React.Component{
    constructor(){
        super()
        this.state={
            
        }
    }
    render(){
        return <button className="btn btn-default" onClick={this.myclickHandler}>按钮</button>
    }
    myclickHandler(){
        alert(2)
    }
}

使用=>函数

render(){
        return <button className="btn btn-default" onClick={()=>{this.myclickHandler()}}>按钮</button>
    }
    myclickHandler=()=>{
        alert(2)
    }

传参数

import React from 'react'

export default class BindEvent extends React.Component{
    constructor(){
        super()
        this.state={
            msg:'dog'
        }
    }
    render(){
        return <div>
            <button className="btn btn-default" onClick={()=>{this.myclickHandler('pig','dog')}}>按钮</button>
            <hr/>
            <h3>{this.state.msg}</h3>
        </div>
    }
    myclickHandler=(arg1,arg2)=>{
       this.setState({
           msg:'yellow dog'+arg1+arg2
       })
    }
}

用callback方法获得数据

myclickHandler=(arg1,arg2)=>{
       this.setState({
           msg:'yellow dog'+arg1+arg2
       },function(){
           console.log(this.state.msg)
       })
    }