React元件内事件傳參 實作tab切換

• 元件内預設

  onClick

  事件觸發函數

  actionClick

  , 是不帶參數的,
• 不帶參數的寫法: 如

  onClick= { actionItem }

• 帶參數的寫法,

  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層目前的狀态, 友善業務的擴充