99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

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

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),豐林企業(yè)網(wǎng)站建設(shè),豐林品牌網(wǎng)站建設(shè),網(wǎng)站定制,豐林網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,豐林網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

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

需求: 在頁面的底部, 有四個(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, 來確定激活四個(gè)item中的哪一個(gè)
    activateButton(id) {
      let tmpMarkArray = [0, 0, 0, 0]
      tmpMarkArray[id] = 1;
      this.setState({markArray: tmpMarkArray});
    }

    render() {
      return ( 

        


        
 零 
 
        
 壹 
 
        
 貳 
 
        
 叁 

        
)
      }

    }

    ReactDOM.render( < TabButton / > , document.getElementById("root"));

小結(jié)

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。