React组件内事件传参实现tab切换的示例代码


Posted in Javascript onJuly 04, 2018

本文介绍了React组件内事件传参实现tab切换的示例代码,分享给大家,具体如下:

  1. 组件内默认onClick事件触发函数actionClick, 是不带参数的,
  2. 不带参数的写法: 如onClick= { actionItem }
  3. 带参数的写法, onClick = { this.activateButton.bind(this, 0) }

下面是一个向组件内函数传递参数的小例子

需求: 在页面的底部, 有四个按钮, 负责切换内容, 当按钮被点击时, 变为激活状态, 其余按钮恢复到未激活状态

分析: 我们首先要创建点击事件的处理函数, 当按钮被点击时, 将按钮的id作为参数发送给处理函数, 处理函数激活对应当前id的按钮, 并将其余三个按钮调整到未激活状态

实现: 用组件state创建一个含有四个元素的一维数组, 四个元素默认为零, 但界面中某个按钮被点击时, 组件内处理函数将一维数组内对应元素变为1, 其它元素变为0

效果演示:

React组件内事件传参实现tab切换的示例代码

核心代码:

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss'

class TabButton extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        markArray: [0, 0, 0, 0], 
        itemClassName:'tab-button-item'
      };
      this.activateButton = this.activateButton.bind(this);
    }

    // 根据参数id, 来确定激活四个item中的哪一个
    activateButton(id) {
      let tmpMarkArray = [0, 0, 0, 0]
      tmpMarkArray[id] = 1;
      this.setState({markArray: tmpMarkArray});
    }

    render() {
      return ( 

        <div className = "tab-button" >

        <div className = {(this.state.markArray)[0] ? "tab-button-item-active" : "tab-button-item" } onClick = { this.activateButton.bind(this, 0) } > 零 </div> 
        <div className = {(this.state.markArray)[1] ? "tab-button-item-active" : "tab-button-item" } onClick = { this.activateButton.bind(this, 1) } > 壹 </div> 
        <div className = {(this.state.markArray)[2] ? "tab-button-item-active" : "tab-button-item" } onClick = { this.activateButton.bind(this, 2) } > 贰 </div> 
        <div className = {(this.state.markArray)[3] ? "tab-button-item-active" : "tab-button-item" } onClick = { this.activateButton.bind(this, 3) } > 叁 </div>

        </div>)
      }

    }

    ReactDOM.render( < TabButton / > , document.getElementById("root"));

小结

React组件内事件传参实现tab切换的示例代码

上面的例子也可以通过event.target.value快速实现,但这个demo的扩展性更好, 在版本迭代过程中, 我们可以传递数量更多的参数, 详尽的描述UI层当前的状态, 方便业务的扩展

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 #Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 #Javascript
Redux实现组合计数器的示例代码
Jul 04 #Javascript
用Node编写RESTful API接口的示例代码
Jul 04 #Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 #Javascript
JS实现点击按钮可实现编辑功能
Jul 03 #Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 #Javascript
You might like
php5.3 goto函数介绍和示例
2014/03/21 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
flexigrid 参数说明
2010/11/23 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
详谈js模块化规范
2017/07/07 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python负载均衡的简单实现方法
2018/02/04 Python
Python爬豆瓣电影实例
2018/02/23 Python
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
采购人员的个人自我评价
2014/01/16 职场文书
作文评语怎么写
2014/12/25 职场文书
关于感谢信的范文
2015/01/23 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书