javascript - onClick 按钮调用另一个组件的方法

Question

我的一个组件中有一个按钮。通过单击它，我想在页面上呈现列表的所有项目。如果没有按钮，如果我只写 {this.functionName}，我可以看到页面上的所有项目 但是当我写的时候

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

我什么也看不到。我尝试以不同的方式将其绑定(bind)到此，但没有成功。 我还想我可以将按钮移动到主页和下面 <Component/>

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

但是它没有起作用。我通过替换 Component.functionName 注意到的唯一一件事通过console.log('sth')是，无需单击任何刷新，“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}与“输入”不再工作

Answer 1

使用按钮代替输入并使用绑定(bind)

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