onClick按鈕調用另一個組件的方法

我在其中一個組件中有一個按鈕。通過點擊它，我想渲染頁面上列表的所有項目。如果沒有按鈕，如果我只是寫{} this.functionName，我可以看到網頁上的所有項目，但是當我寫onClick按鈕調用另一個組件的方法

<input type="submit" value="press" onClick={this.functionName} />

我看不到任何東西。我試圖以不同的方式將其綁定到此，並且不起作用。另外我想我可能會移動的按鈕，主頁和下 <Component/>

<input type="submit" value="press" onClick={Component.functionName} />

但是它沒有工作。我唯一注意到通過console.log('sth')替換Component.functionName的是，如果沒有點擊任何刷新，「sth」打印到控制檯上

我已經檢查過該網站，並試過任何答案，我可以找到，但它沒有工作。該組件是：

module.exports = React.createClass({ 
mixins: [ 
    Reflux.listenTo(TopicStore, 'onChange') 
], 
getInitialState: function(){ 
    return{ 
    topics: [] 
    } 
}, 

render: function(){ 
    return <div className="list-group"> 
    TopicList 
    {this.renderTopics()} 

</div> 
}, 

renderTopics: function(){ 
    return this.state.topics.map(function(topic){ 
     return <li> 
      {topic} 
     </li> 
    }); 
},

這一項工作正常，並列出在頁面上的主題中的所有項目，但如果我更換{this.renderTopics}與「輸入」一個不工作更多

來源

2016-07-23 HikingGuru

一些代碼好友 – henrybbosa

我添加代碼 – HikingGuru

這實際上可以指的按鈕對象不是及部件 – henrybbosa

使用按鈕，而不是輸入和使用綁定的

<button type="submit" value="press" onClick={this.functionName.bind(this)} />

來源

2016-07-23 09:56:03

按鈕不工作我已經嘗試過，但是再次嘗試，你建議，仍然不工作 – HikingGuru

OK，沒有潛水深入到你的代碼，我建議你去嘗試這樣的事情

module.exports = React.createClass({ 
mixins: [ 
    Reflux.listenTo(TopicStore, 'onChange') 
], 

showTopics: false, 

getInitialState: function(){ 
    return{ 
    topics: [] 
    } 
}, 

render: function(){ 
    return (
     <div className="list-group"> 
      TopicList 
      <button onClick={this.toggleTopics()}>Show Topics</button> 
      {this.showTopics && this.renderTopics()} 
     </div> 
    ) 
}, 

toggleTopics: function() { 
    this.showTopics = !this.showTopics; 
}, 

renderTopics: function(){ 
    return this.state.topics.map(function(topic){return <li>{topic}</li>}); 
},

注意最後的逗號，我試着保留你在問題中提供的代碼結構。

來源

2016-07-23 10:18:59 OlehZiniak

您的組件不顯示主題，因爲輸入按鈕的onClick方法會生成列表，但不會重新呈現該組件。

組件的狀態應該有一個切換來顯示列表（或不顯示）。輸入的onClick應該切換組件的狀態，這會導致組件被重新渲染。

class TopicList extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     showTopics: false 
    } 
    this.toggleTopics = this.toggleTopics.bind(this) 
    } 

    toggleTopics() { 
    this.setState({showTopics: !this.state.showTopics}) 
    } 

    renderTopics() { 
    return this.props.topics.map(x => 
     <li key={x}>{x}</li> 
    ) 
    } 

    render() { 
    return (
    <div> 
     <input type='submit' value='press' onClick={this.toggleTopics} /> 
     <ul> 
     {this.state.showTopics && this.renderTopics()} 
     </ul> 
    </div> 
    ) 
    } 
}

另外，不要僞造者給予li標記一個key屬性。

來源

2016-07-23 11:18:15 sandeepdhakal

onClick按鈕調用另一個組件的方法

回答

相關問題