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。從外部變量調用函數

回答

相關問題