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 相关文章推荐
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
element中的$confirm的使用
Apr 26 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
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
php实现rc4加密算法代码
2012/04/25 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
浅析python协程相关概念
2018/01/20 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python调用c++传递数组的实例
2019/02/13 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
How TDD works
2012/09/30 面试题
《路旁的橡树》教学反思
2014/04/07 职场文书
保护环境倡议书300字
2014/05/19 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
幼儿园感谢信
2015/01/21 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android