javascript - 将参数传递给函数 Reactjs

Question

我正在使用 react-mdl 库构建标签栏。我的状态对象中有一个 activeTab 属性，用于确定单击了哪个选项卡并呈现正确的信息。

我在选项卡持有者上使用了一个 onChange 方法来从用户点击事件中获取选项卡 ID，并将该 ID 传递给我的函数，其中 activeTab 属性将从事件中设置。

这是我到目前为止所做的:

import React, { Component } from 'react';
import { Tabs, Tab } from 'react-mdl';
import './index.css';

class Projects extends Component {

constructor(props){
    super(props);

    this.state = {
        activeTab: 0
    }

}

handleTabChange(tabId){
    this.setState({
        activeTab: tabId
    });
    console.log(this.state);
}

render() {
    return (
        <div className="">
            <Tabs
                activeTab={this.state.activeTab}
                onChange={ () => this.handleTabChange(tabId)}>
                <Tab>Android</Tab>
                <Tab>Web</Tab>
                <Tab>Full Stack</Tab>
            </Tabs>
        </div>
    );
}

}

export default Projects;

但是当我构建项目时它在浏览器中崩溃并出现此错误:

./src/components/Projects/Projects.js
Line 28:  'tabId' is not defined  no-undef

Search for the keywords to learn more about each error.

我该如何解决这个问题？谢谢。

Answer 1

你快到了。来自 react-mdl examples :

您需要将 tabId 作为参数传递给 onChange 绑定(bind)。

onChange={ (tabId) => this.handleTabChange(tabId)}

完整示例:

<div className="demo-tabs">
   <Tabs activeTab={this.state.activeTab} 
         onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
      <Tab>Starks</Tab>
      <Tab>Lannisters</Tab>
      <Tab>Targaryens</Tab>
   </Tabs>
   <section>
        <div className="content">Content for the tab: {this.state.activeTab}</div>
   </section>
</div>