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 相关文章推荐
JavaScript原型继承之基础机制分析
Aug 26 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
js实现点击选项置顶动画效果
Aug 25 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中Session的概念
2006/10/09 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
模拟select的代码
2011/10/19 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
详解Python打包分发工具setuptools
2019/08/05 Python
基于python3实现倒叙字符串
2020/02/18 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
港湾网络笔试题
2014/04/19 面试题
大学毕业感言50字
2014/02/07 职场文书
我为自己代言广告词
2014/03/18 职场文书
个人安全生产承诺书
2014/05/22 职场文书
应届生求职信
2014/05/31 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
python tkinter模块的简单使用
2021/04/07 Python