通過道具傳遞給孩子的反應函數未定義

Question

我試圖通過selectNotebook到notebookNav以用於onClick()函數。我可以在我的React開發工具中看到selectNotebook，但每當我點擊一個按鈕時，就會收到錯誤Uncaught TypeError: Cannot read property 'selectNotebook' of undefined(…)。

這是我的父組件：

var App = React.createClass({ 

    getInitialState: function() { 
    return { 
     notebooks: this.props.notebooks, 
     nav: this.props.nav 
    }; 
    }, 

    selectNotebook: function(id) { 
    const nav = {...this.state.nav}; 
    nav[notebook] = this.props.notebooks[id]; 
    this.setState({nav}) 
    }, 

    render: function() { 
    return (
     <div style={{"height": "100%"}}> 
     <NotebookNav 
      notebooks={this.props.notebooks} 
      selectNotebook={this.selectNotebook} 
     > 
     </NotebookNav> 
     <Technique></Technique> 
     </div> 
    ); 
    } 
}); 

這是子組件：

var NotebookNav = React.createClass({ 

    render: function() { 
    notebooks = this.props.notebooks; 

    return (
     <div className="col-md-4"> 
     <div className="panel panel-info"> 
      <div className="panel-heading"> 
      <h4 className="panel-title">Your Notebooks</h4> 
      </div> 

      <div className="panel-body"> 
      <ul className="breadcrumb" 
       style={{"backgroundColor": "#fff", "marginBottom": "0"}} 
      > 
       <li className="active"> 
       notebooks 
       </li> 
      </ul> 

      <ul className="nav nav-pills nav-stacked"> 
       <div className="btn-group-vertical" style={{"width": "100%"}}> 
       {notebooks.map(function (notebook) { 
        return(
        <li 
         key={notebook.id} 
         className="btn btn-block btn-raised btn-lg" 
         onClick={() => this.props.selectNotebook(notebook.id)} 
        > 
         {notebook.name} 
        </li> 
       ); 
       })} 
       </div> 
      </ul> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
}); 

Answer 1

 <div className="btn-group-vertical" style={{"width": "100%"}}> 
     {notebooks.map(function (notebook) { 
      return(
      <li 
       key={notebook.id} 
       className="btn btn-block btn-raised btn-lg" 
       onClick={() => this.props.selectNotebook(notebook.id)} 
      > 
       {notebook.name} 
      </li> 
     ); 
     })} 
     </div> 

的問題是傳遞給map該轉換函數將創建它自己的範圍，其中this未定義。爲了解決這個問題，Array.prototype.map需要作用域的第二個參數，你可以從你的外部範圍通過this：

{notebooks.map(function (notebook) { ... }, this) 

如果目標環境支持它，你也可以用一個箭頭功能，隱式使用外部範圍：

{notebooks.map((notebook) => { ... })} 

Answer 2

嘗試通過使用此綁定傳遞： -

<NotebookNav 
     notebooks={this.props.notebooks} 
     selectNotebook={this.selectNotebook.bind(this)} 
    > 

，然後你的子元素以及使用方向FUNC以便它的綁定： -

{notebooks.map((notebook) => { 
     return(
     <li 
      key={notebook.id} 
      className="btn btn-block btn-raised btn-lg" 
      onClick={() => this.props.selectNotebook(notebook.id)} 
     > 
      {notebook.name} 
     </li> 
    ); 
    })}