我正在使用 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.
我该如何解决这个问题?谢谢。
最佳答案
你快到了。来自 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>
关于javascript - 将参数传递给函数 Reactjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53185408/