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 相关文章推荐
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
全面了解js中的script标签
2016/07/04 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
jQuery使用方法
2017/02/04 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
django 类视图的使用方法详解
2019/07/24 Python
django orm模块中的 is_delete用法
2020/05/20 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
成品仓管员工作职责
2013/12/29 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
人力资源求职信
2014/05/25 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL