onClick 버튼 다른 구성 요소의 메소드 호출

Question

내 구성 요소 중 하나에 버튼이 있습니다. 그것을 클릭하여 페이지의 목록의 모든 항목을 렌더링하려고합니다. 난 그냥 {this.functionName}를 작성하는 경우 버튼이 없으면, 나는 페이지 에있는 모든 항목을 볼 수 있지만 내가

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

을 쓸 때 난 아무것도 볼 수 없습니다. 나는 이것을 다른 방식으로 묶으려고 노력했지만 작동하지 않았다. 또한 내가이 일을 일부러 그러나 내가 홈페이지에있는 버튼을 이동

<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

사용 버튼 "입력"한 나던 작업으로 {this.renderTopics}을 대체하는 경우 입력 및 사용 바인딩의

<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

입력 버튼의 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 특성에 태그를주고 위조하지 않습니다.