React组件内事件传参实现tab切换的示例代码

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