彩票网站大全:React组件内事件传参实现tab切换的示例代码

江西多乐彩11选5走势图 www.ptdvv.cn  更新时间:2018年07月04日 11:10:14   作者:木子昭   我要评论

本篇文章主要介绍了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层当前的状态, 方便业务的扩展

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

相关文章

  • JavaScript 高级语法介绍

    JavaScript 高级语法介绍

    前几天一个同事问我如下的JavaScript代码如何理解
    2009-06-06
  • 原生JS可拖动弹窗效果实例代码

    原生JS可拖动弹窗效果实例代码

    这篇文章介绍了原生JS可拖动弹窗效果实例代码,有需要的朋友可以参考一下
    2013-11-11
  • 基于Webpack4和React hooks搭建项目的方法

    基于Webpack4和React hooks搭建项目的方法

    这篇文章主要介绍了基于Webpack4和React hooks搭建项目的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • JavaScript中的私有/静态属性介绍

    JavaScript中的私有/静态属性介绍

    大家都知道在JavaScript中没有块级作用域的概念,我们可以通过使用闭包来模拟实现块级作用域,看下面的示例
    2012-07-07
  • antd Upload 文件上传的示例代码

    antd Upload 文件上传的示例代码

    这篇文章主要介绍了antd Upload 文件上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 浅谈js继承的实现及公有、私有、静态方法的书写

    浅谈js继承的实现及公有、私有、静态方法的书写

    下面小编就为大家带来一篇浅谈js继承的实现及公有、私有、静态方法的书写。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • js调用css属性写法

    js调用css属性写法

    对于没有中划线的css属性一般直接使用style.属性名即可,对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可,感兴趣的朋友可以参考下
    2013-09-09
  • JS写的数字拼图小游戏代码[学习参考]

    JS写的数字拼图小游戏代码[学习参考]

    昨天没事做,就用JS写了个数字拼图的小游戏,自娱自乐。 可惜关于逆序数的问题还没解决,现在有时是拼不成的,大家见谅了。
    2008-10-10
  • javascript 变速加数功能实现代码

    javascript 变速加数功能实现代码

    试想一下你要在你的网站提供如下这样的功能:提供一个文本框用于收集用户数据,这个文本框只能接受整型的数值,不提供给用户手工输入,只提供两个按钮。
    2009-10-10
  • 左右悬浮可分组的网站QQ在线客服代码(可谓经典)

    左右悬浮可分组的网站QQ在线客服代码(可谓经典)

    QQ在线客服在每一个web开发人员的记忆里都是一个经典,既然是经典,也就是必不可少,那就应该很好的呈现出来,本文整理了一些左右悬浮可分组的网站QQ在线客服代码,需要的朋友可以了解下
    2012-12-12

最新评论

242| 459| 563| 959| 607| 1000| 168| 660| 938| 859|