ReactJS。从外部变量调用函数
问题描述:
我是ReactJS的新手,并试图制作一个小型Web应用程序。 我有一个项目列表放在一个侧边栏,我希望每个项目都可以在点击时返回边栏的状态(以便我可以相应地设置活动链接的样式)。ReactJS。从外部变量调用函数
import React, {Component} from 'react';
import SideBarItem from "./SideBarItem";
const items = {
'DASHBOARD' : 'home',
'Utenti': 'user',
'Corsi' : 'education',
'Logistica' : 'check',
'Comunicazioni': 'bullhorn'
};
const listItems = Object.entries(items).map(([key,value])=>{
return <SideBarItem
onClick={this.changeState(key)} active={this.state.active == key ? 'active' : ''}
title={key}
glyph={'glyphicon glyphicon-' + value.toString()}/>
});
class SideBar extends Component {
constructor(props) {
super(props);
this.state = {active: 'DASHBOARD'};
}
changeState (row) {
this.setState({
active: row
});
}
render() {
return (
<div id = "sidebar" className="col-sm-3 col-md-2 sidebar paper-depth-1">
<ul className = 'nav nav-sidebar'>
{listItems}
</ul>
</div>
);
}
}
export default SideBar;
但这种代码returnig以下错误:
TypeError: _this.changeState is not a function
据我所知,有一些错误,呼吁从外部变量的组件功能,但我不明白我怎么能做出这种以任何其他方式工作。
答
如果您创建render()
中的项目列表,那么this
范围将作为组件实例,因为您需要它。
class SideBar extends Component {
constructor(props) {
super(props);
this.state = {active: 'DASHBOARD'};
}
changeState(row) {
this.setState({
active: row
});
}
render() {
return (
<div id="sidebar" className="col-sm-3 col-md-2 sidebar paper-depth-1">
<ul className="nav nav-sidebar">
{Object.entries(items).map(([key,value]) =>
<SideBarItem
onClick={() => this.changeState(key)}
active={this.state.active == key ? 'active' : ''}
title={key}
glyph={'glyphicon glyphicon-' + value.toString()}
/>
)}
</ul>
</div>
);
}
}
+0
谢谢,编译错误消失了! 我真的没有想到这样做... 现在页面呈现,但状态不会改变onClick ... –
通常情况下,你会将函数传递给组件,但是现在组织它的方式现在变得更加棘手。 –