Question

我有一个tabs.js文件，需要将其与某些数据连接。 tabs.js下有4个选项卡，单击每个按钮应显示一些数据。我已经在4个标签上拥有一些onClick功能。我无法掌握如何进一步向每个选项卡添加其他功能，以便每个选项卡在单击时都应显示数据。

请提出一个简单的解决方案。

这是我的代码：

import React, { Component } from 'react'



class Tabs extends Component {
    constructor(props) {
        super(props);

        this.state = { selectedTabIndex: -1};
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(index) {
        this.setState({ selectedTabIndex: index});
    }

    render() {

        const { selectedTabIndex } = this.state;
        const { tabs } = this.props;

        return (
            <ul className="tabs padding-left-large padding-top-small">
                <li className={`tab-title ${selectedTabIndex==0?'active':''}`}><button onClick={()=>{this.handleChange(0)}}>{tabs[0]}</button></li>
                <li className={`tab-title ${selectedTabIndex==1?'active':''}`}><button onClick={()=>{this.handleChange(1)}}>{tabs[1]}</button></li>
                <li className={`tab-title ${selectedTabIndex==2?'active':''}`}><button onClick={()=>{this.handleChange(2)}}>{tabs[2]}</button></li>
                <li className={`tab-title ${selectedTabIndex==3 || selectedTabIndex==-1?'active':''}`}><button onClick={()=>{this.handleChange(3)}}>{tabs[3]}</button></li>
            </ul>
        );
    }

}

export default Tabs

Answer 1

只要您将参数传递给我，就好像让每个按钮执行其他操作的最简单方法就是这样：

handleChange(index) {
    if(index === 1){
      //do something for tab 1
    }
    if(index === 2){
      //do something for tab 2
    }
    //etc.
    this.setState({ selectedTabIndex: index});
}

如何在ReactJS中的按钮上添加多个onClick函数

1 个答案: