网络视频直播系统 高阶函数 springcloud 分库查询 codeigniter meteor menu vue部署 后台模板下载 bootstrap模板 jquery删除子元素 bootstrap侧边栏 大数据驾驶舱 spark算法 excel带格式复制粘贴 svn查看历史版本 destoon python零基础 java教学 java删除数组元素 javaforeach java的基本类型 java学习教程 javarandom java语言代码大全 java基础编程 java数组追加 java系统时间 java多线程教程 java中map java判断 心理学与生活下载 计算机操作系统第四版 sql行转列 无限弹窗bat 云管家 司司网吧 苹果放大镜 奥法隐藏外观 autocad2004迷你版
当前位置: 首页 > 学习教程  > 编程语言

React的事件传参

2020/8/11 19:43:42 文章标签:

事件的几种传参方式

简单案例:效果为点击按钮改变counter的值

import React, { Component } from 'react'

export default class App extends Component {
    state = {
        counter: 1
    }
    handelAddClick = (step) => {
        this.setState({
            counter: this.state.counter += step
        })

    }
    handelSubClick(...step) {
        this.setState({
            counter: this.state.counter -= step[0]
        })
    }

    render() {
        return (
            <div>
                {/* 1. 传参的方式 bind 进行传参 */}
                <button onClick={this.handelAddClick.bind(this,10)}>+</button>
                {this.state.counter}
                <button onClick={this.handelSubClick.bind(this,-10)}>-</button>

                {/* 2.通过箭头函数传参 */}
                {/* <button 
                onClick={(step) => {
                    this.handelAddClick.call(this, 10)
                }}>+</button>
                {this.state.counter}
                <button onClick={(step) => {
                    this.handelSubClick.apply(this, [10])
                }
                }>-</button> */}
            </div>
        )
    }
}
  • 事件传参方式一:通过bind 进行传参,call和apply也可以,但要注意参数类型
 <button onClick={this.handelAddClick.bind(this,10)}>+</button>
  {this.state.counter}
<button onClick={this.handelSubClick.bind(this,-10)}>-</button>
  • 事件传参方式二:通过箭头函数传参
 	 <button 
       onClick={(step) => {
          this.handelAddClick.call(this, 10)
           }}>+</button>
           
    	{this.state.counter}
    	
         <button onClick={(step) => {
            this.handelSubClick.apply(this, [10])
           }}>-</button>

本文链接: http://www.dtmao.cc/news_show_100165.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?