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 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
vue实现购物车的监听
Apr 20 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
原生js实现自定义消息提示框
Nov 19 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 显示指定路径下的图片
2009/10/29 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python解析xml模块封装代码
2014/02/07 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
python中如何打包用户自定义模块
2020/09/23 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
介绍一下JMS编程步骤
2015/09/22 面试题
房地产销售大学生自我评价分享
2013/11/11 职场文书
中文系学生自荐信范文
2013/11/13 职场文书
会计出纳岗位职责
2013/12/25 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
一文弄懂MySQL索引创建原则
2022/02/28 MySQL