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

据我所知，有一些错误，呼吁从外部变量的组件功能，但我不明白我怎么能做出这种以任何其他方式工作。

来源

2017-05-25 Caterina Bano

通常情况下，你会将函数传递给组件，但是现在组织它的方式现在变得更加棘手。 –

如果您创建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> 
     ); 
    } 
}

来源

2017-05-25 14:54:01

谢谢，编译错误消失了！我真的没有想到这样做... 现在页面呈现，但状态不会改变onClick ... –

ReactJS。从外部变量调用函数

回答

相关问题