React组件内事件传参实现tab切换的示例代码

本文介绍了React组件内事件传参实现tab切换的示例代码，分享给大家，具体如下：

  1. 组件内默认onClick事件触发函数actionClick, 是不带参数的,
  2. 不带参数的写法: 如onClick= { actionItem }
  3. 带参数的写法, onClick = { this.activateButton.bind(this, 0) }

下面是一个向组件内函数传递参数的小例子

需求: 在页面的底部, 有四个按钮, 负责切换内容, 当按钮被点击时, 变为激活状态, 其余按钮恢复到未激活状态

分析: 我们首先要创建点击事件的处理函数, 当按钮被点击时, 将按钮的id作为参数发送给处理函数, 处理函数激活对应当前id的按钮, 并将其余三个按钮调整到未激活状态

实现: 用组件state创建一个含有四个元素的一维数组, 四个元素默认为零, 但界面中某个按钮被点击时, 组件内处理函数将一维数组内对应元素变为1, 其它元素变为0

效果演示:

核心代码:

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"));

小结

上面的例子也可以通过event.target.value快速实现,但这个demo的扩展性更好, 在版本迭代过程中, 我们可以传递数量更多的参数, 详尽的描述UI层当前的状态, 方便业务的扩展

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React学习之事件绑定的几种方法对比

    前言 本文主要给大家介绍了关于React事件绑定的几种方法对比的相关呢荣,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined. 通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构造函数中使用bind绑定this class Button extends React.Component { constructor(props) { su

  • React学习笔记之事件处理（二）

    之前已经给大家介绍了React中的条件渲染(传送门),本文将给大家关于React中事件处理的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: React的事件处理和DOM的事件处理是很相似的,只是有一些语法上的区别: React的事件名是驼峰的,不是小写的 在JSX语法中,你传递一个fucntion作为时间处理器,而不是一个string 举个例子: <button onClick={activateLasers}> Activate Lasers </button> 而

  • React事件处理的机制及原理

    React中的事件处理 在React元素中绑定事件有两点需要注意: (1)在React中,事件命名采用驼峰命名方式,而不是DOM元素中的小写字母命名方式.例如onclick要写成onClick,onchange要写成onChange等. (2)处理事件的响应函数要以对象的形式赋值给事件属性,而不是DOM中的字符串形式.例如在DOM中绑定一个点击事件应该写成: <button onclick="clickButton()"> Click </button> 而在R

  • 详解react关于事件绑定this的四种方式

    在react组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件,而且react还会对这种引用进行缓存,以达到cpu和内存的最大化.在使用了es6 class或者纯函数时,这种自动绑定就不复存在了,我们需要手动实现this的绑定 React事件绑定类似于DOM事件绑定,区别如下: 1.React事件的用驼峰法命名,DOM事件事件命名是小写 2.通过jsx,传递一个函数作为event handler,而不是一个字符串. 3.React事件不能通过返回false来阻止默认事件,

  • 在React中如何优雅的处理事件响应详解

    前言 本文主要给大家介绍的是关于React处理事件响应的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧. React中定义一个组件,可以通过React.createClass或者ES6的class.本文讨论的React组件是基于class定义的组件.采用class的方式,代码结构更加清晰,可读性强,而且React官方也推荐使用这种方式定义组件. 处理事件响应是Web应用中非常重要的一部分.React中,处理事件响应的方式有多种. 一.使用箭头函数 先上代码: //代码1 class

  • React中阻止事件冒泡的问题详析

    前言 最近在研究react.redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧 在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 |  A  --------------

  • React组件内事件传参实现tab切换的示例代码

    React组件内事件传参实现tab切换的示例代码

    本文介绍了React组件内事件传参实现tab切换的示例代码,分享给大家,具体如下: 组件内默认onClick事件触发函数actionClick, 是不带参数的, 不带参数的写法: 如onClick= { actionItem } 带参数的写法, onClick = { this.activateButton.bind(this, 0) } 下面是一个向组件内函数传递参数的小例子 需求: 在页面的底部, 有四个按钮, 负责切换内容, 当按钮被点击时, 变为激活状态, 其余按钮恢复到未激活状态 分析

  • 使用forEach和ES6实现tab切换的示例代码

    使用forEach和ES6实现tab切换的示例代码

    本文主要介绍了使用forEach和ES6实现tab切换的示例代码,分享给大家,具体如下: 效果: html代码: <ul class="nav"> <!-- <li> <a href="">前端</a> <ul class="select"> <li>就业班</li> <li>精品</li> <li>学院福利</li

  • React事件处理过程中传参的实现方法

    目录 摘要 1.箭头函数 2.函数柯里化 3.bind方法 摘要 首先我们知道,在React中,是通过小驼峰式给元素绑定事件: fn = ()=>{ //执行代码 } button onClick={this.fn}>111</button> 但是如果有Vue的基础,可以很清楚的看到二者的区别.在Vue中,我们可以直接给fn传递参数. 但是如果在React中我们这么做: fn = (value)=>{ //执行代码 console.log(value) } button on

  • 微信小程序实现bindtap等事件传参

    微信小程序实现bindtap等事件传参

    之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件时一般的处理方法是指明元素所在的id,bindtap只是写明函数名,例如,bindtap='setNumber',而不是bindtap='setNumber(1)',在js中只要写function(e).通过e可以获取所传过来元素的所有信息. 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将

  • 微信小程序事件绑定传参冒泡及捕获的示例详解

    微信小程序事件绑定传参冒泡及捕获的示例详解

    目录 常见的事件有: currentTarget和target的区别 事件传递参数 touches和changedTouches的区别 事件的绑定两种方法 事件传参 事件的冒泡与事件的捕获 小结 常见的事件有: 类型 触发条件 最低版本 touchstart 手指触摸动作开始   touchmove 手指触摸后移动   touchcancel 手指触摸动作被打断,如来电提醒,弹窗   touchend 手指触摸动作结束   tap 手指触摸后马上离开   longpress 手指触摸后,超过35

  • vue如何自定义事件传参

    目录 自定义事件传参 先来简单看个例子 自定义事件的$event传参问题 原生vue里的$event 自定义事件里的$event 自定义事件传参 先来简单看个例子 TodoList.vue : <template>   <ul>     <li>       <todo-item         v-for="item in list" :key="item.id"         :status="doneLis

  • 一文带你了解微信小程序数据绑定、事件绑定以及事件传参、数据同步

    目录 数据绑定 基本原则 在data中定义数据 Mustache语法 Mustache语法的应用 绑定内容 绑定属性 运算(三元运算.算术运算等) 事件绑定 什么是事件? 常用事件 事件对象属性 target与currentTarget的区别 bindtap语法格式 在事件处理函数中为data赋值 事件传参 查看参数 bindinput语法格式 实现文本框与data之间的数据同步 总结 数据绑定 基本原则 在data中定义数据 在WXML中使用数据 在data中定义数据 在页面对应的.js 文件

  • js 动态生成html 触发事件传参字符转义的实例

    通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式.事件等属性元素,而这时经常会出现所谓的 "单.双引号不够用" 的情况,别急,这时可以利用 html 语言中的转义字符来解决. 下面就来介绍一下相应的转义字符吧: & -- (ampersand) 转义字符对应为   & "   -- (double quote) 双引号,转义字符对应为  " '  -- (single quote)单引号,转义字符对应为  ' <  -- (l

  • 对vue下点击事件传参和不传参的区别详解

    如下所示: <div id = 'app'> <p><button @click = 'test_click1'>{{btn_text1}}</button></p> <br> <p><button @click = 'test_click2("123")'>{{btn_text2}}</button></p> </div> <script src=

  • layui弹出框Tab选项卡的示例代码

    最近做一个项目,使用LAYUI,在界面上Z弹出一个界面A,A上有TAB选项卡,分别为界面B.C:B界面上有一个列表,双击败列表行时,要把数据回写到界面Z; 界面A上有提交按钮,选中B界面上列表某一条数据,界面A上点提交时,同样回写数据到Z: 实现:双击:B上实现双击方法,调用A上界面方法,再调用Z界面上方法: B界面上方法: function dbclick_select(row,index){ debugger; if(row == null){ var nodes=$("#TableSele

随机推荐