onClickボタン別のコンポーネントのメソッドを呼び出す

Question

私のコンポーネントの1つにボタンがあります。これをクリックすると、ページのリストのすべてのアイテムをレンダリングします。私はちょうど{this.functionName}を書いた場合、ボタンがなければ、私はページ 上のすべての項目を見ることができますが、私は

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

を書くとき、私は何を参照してください傾けます。私はこれをさまざまな方法でバインドしようとしましたが、うまくいきませんでした。 はまた、私はそれが仕事をdidntの、しかし私は、ホームページにして

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

<Component/> 下のボタンを移動するかもしれないと思いました。 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> 
    }); 
}, 

これは正常に動作し、ページ 上のトピックのすべての項目が一覧表示されますが、私の代わりに任意のより

Answer 1

使用ボタン「入力」1つのdoesntの仕事で{this.renderTopics}を置き換える場合入力のバインド

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

Answer 2

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

末尾にコンマがあるのを見て、あなたが質問で提供したコードの構造を維持しようとしました。

Answer 3

入力ボタンの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性を付与するために偽造しません。