React組件內(nèi)事件傳參實(shí)現(xiàn)tab切換的示例代碼

更新時(shí)間：2018年07月04日 11:10:14 作者：木子昭

本篇文章主要介紹了React組件內(nèi)事件傳參實(shí)現(xiàn)tab切換的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了React組件內(nèi)事件傳參實(shí)現(xiàn)tab切換的示例代碼，分享給大家，具體如下：

組件內(nèi)默認(rèn)onClick事件觸發(fā)函數(shù)actionClick, 是不帶參數(shù)的,
不帶參數(shù)的寫(xiě)法: 如onClick= { actionItem }
帶參數(shù)的寫(xiě)法, onClick = { this.activateButton.bind(this, 0) }

下面是一個(gè)向組件內(nèi)函數(shù)傳遞參數(shù)的小例子

需求: 在頁(yè)面的底部, 有四個(gè)按鈕, 負(fù)責(zé)切換內(nèi)容, 當(dāng)按鈕被點(diǎn)擊時(shí), 變?yōu)榧せ顮顟B(tài), 其余按鈕恢復(fù)到未激活狀態(tài)

分析: 我們首先要?jiǎng)?chuàng)建點(diǎn)擊事件的處理函數(shù), 當(dāng)按鈕被點(diǎn)擊時(shí), 將按鈕的id作為參數(shù)發(fā)送給處理函數(shù), 處理函數(shù)激活對(duì)應(yīng)當(dāng)前id的按鈕, 并將其余三個(gè)按鈕調(diào)整到未激活狀態(tài)

實(shí)現(xiàn): 用組件state創(chuàng)建一個(gè)含有四個(gè)元素的一維數(shù)組, 四個(gè)元素默認(rèn)為零, 但界面中某個(gè)按鈕被點(diǎn)擊時(shí), 組件內(nèi)處理函數(shù)將一維數(shù)組內(nèi)對(duì)應(yīng)元素變?yōu)?, 其它元素變?yōu)?

效果演示:

核心代碼:

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

    // 根據(jù)參數(shù)id, 來(lái)確定激活四個(gè)item中的哪一個(gè)
    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"));

小結(jié)

上面的例子也可以通過(guò)event.target.value快速實(shí)現(xiàn),但這個(gè)demo的擴(kuò)展性更好, 在版本迭代過(guò)程中, 我們可以傳遞數(shù)量更多的參數(shù), 詳盡的描述UI層當(dāng)前的狀態(tài), 方便業(yè)務(wù)的擴(kuò)展

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: