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 相关文章推荐
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 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超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
JS控制表格隔行变色
2006/06/26 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
举例讲解Python中的算数运算符的用法
2015/05/13 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
python字典改变value值方法总结
2019/06/21 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
质量工程师岗位职责
2013/11/16 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
酒会开场白大全
2015/06/01 职场文书
电力培训学习心得体会
2016/01/11 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers