如何將變量從一種方法傳遞到另一種方法

Question

我有一個名爲TopicsList的組件，其中有一個名爲topicsID的變量在onClick方法中。我想通過變量來渲染方法topicsID = {topicsID}，但是它給出了未定義的錯誤。

var TopicsList = React.createClass({ 

    getInitialState: function() { 
     return { 
      isTopicClicked : false, 
      topicPages 
     }; 
    }, 

    onClick: function (topicID) { 
     this.setState({isTopicClicked : true}); 
     var topicsID = topicID; 
    }, 

    render: function() { 
     return (
      <div> 
       <div className="row topic-list"> 
        <SingleTopicBox 
         topicID="1" 
         onClick={this.onClick} 
         label="Topic" 
         /> 
        <SingleTopicBox 
         topicID="2" 
         onClick={this.onClick} 
         label="Topic" 
         /> 
        <SingleTopicBox 
         topicID="3" 
         onClick={this.onClick} 
         label="Topic" 
         /> 
        <SingleTopicBox 
         topicID="4" 
         onClick={this.onClick} 
         label="Topic" 
         /> 
       </div> 
       <div className="row"> 
       { this.state.isTopicClicked ? <SelectedTopicPage topicsID={topicsID} topicPages={topicPages} /> : null } 
       </div> 
      </div> 
     ); 
    } 
}); 

Answer 1

var是一些東西，只有在（詞法）範圍存在 - 即內您onClick功能（以及任何嵌套函數）。

您應該將其分配給this，即this.topicsID。或者，在這種情況下，您最好將其設置爲狀態，因爲您要重新渲染子組件。

onClick: function (topicID) { 
    this.setState({topicsID : topicID}); 
}, 

render: function() { 
     return (
      <div> 
       {this.state.topicsID && <SelectedTopicPage topicsID={this.state.topicsID} topicPages={topicPages} /> } 
      </div> 
     ); 
}