Question

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

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

我看不到任何东西。我试图以不同的方式将它绑定到这个并且没有用。此外，我想我可能会将按钮移动到主页和下面 <Component/>

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

然而它没有用。通过Component.functionName替换console.log('sth')，我注意到的唯一事情是没有点击任何刷新，＆＃34; sth＆＃34;打印到控制台

我已经检查了网站，并尝试了我能找到的任何答案，但它没有用。该组件是：

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>
    });
},

这个工作正常，并列出页面主题中的所有项目但如果我用＆＃34;输入＆＃34;替换{this.renderTopics}一个人不再工作了

Answer 1

使用按钮代替输入并使用bind

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

Answer 2

好的，如果没有深入研究您的代码，我建议您尝试这样的事情

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>});
},

在最后注意尾随逗号，我试图保留你在问题中提供的代码结构。

Answer 3

您的组件未显示主题，因为输入按钮的position:fixed方法会生成列表，但不会重新呈现该组件。

您的组件的状态应该有一个切换显示列表（或不显示）。输入的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属性。

onClick按钮调用另一个组件

3 个答案: