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绑定。

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>

将参数传递给函数Reactjs

1 个答案: