React組件內事件傳參實現tab切換的示例代碼

2019-11-19 13:33:36

字體：大中小

來源：轉載

供稿：網友

本文介紹了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"));

小結