кнопка onClick, вызывающая метод другого компонента

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'), заключается в том, что без щелчка обновления «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

использование кнопки вместо ввода и использования привязки

<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 собственности.