Метеор Реагировать Изменение государства из нескольких компонентов

Question

Использование Meteor 1.3 и Реагировать, я сделал следующие основные компоненты:

//imports 
export default class Show extends TrackerReact(Component) { 

    renderOptions() { 
    return this.options().map((option) => (
     <Option key={ option._id } option={ option }/> 
    )); 
    } 

    options() { 
    return Options.find({}).fetch(); 
    } 

    render() { 
    return (
     <div className="container"> 
     <ul> 
      { this.renderOptions() } 
     </ul> 
     </div> 
    ); 
    } 
} 

И я следующий Option компонента:

export default class Option extends Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     disabled: false 
    }; 
    } 

    vote() { 
    this.setState({ disabled: true }); 
    } 

    renderButton() { 
    return this.state.disabled ? 'btn btn-success' : 'btn btn-default'; 
    } 

    render() { 
    return (
     <li> 
     <button disabled={ this.state.disabled ? 'disabled' : '' } type="button" className={this.renderButton()} onClick={this.vote.bind(this)}> 
      Vote 
     </button> 
     <span> { this.props.option.text }</span> 
     </li> 
    ); 
    } 
} 

Option.PropTypes = { 
    option: PropTypes.object.isRequired 
}; 

Как я могу сделайте это так, когда я нажимаю кнопку (которая вызывает метод компонента vote()) по любому из вариантов, отображаемых компонентом Show, состояние каждой кнопки установлено на true? В принципе, я извлекаю несколько кнопок для пользователя, чтобы щелкнуть, и как только он нажмет на него, я хочу отключить все остальные. Поэтому мне нужно установить состояние всех кнопок на disabled при щелчке.

Answer 1

Это скорее вопрос ответа, чем вопрос Метеор, но вам нужно будет объявить вашу функцию в своем родительском компоненте, а затем передать ее в качестве опоры для вашего дочернего компонента. Затем внутри вашего дочернего компонента вы можете вызвать эту функцию с помощью this.props.funcName.

Итак, в вашем примере вы хотите объявить состояние в своем Show компоненте (или выше, если оно влияет на другие компоненты), а затем передать функцию, которая обновляет состояние вашего родительского компонента. Это состояние затем будет передано в качестве реквизита для вашего компонента Option.

Сообщите мне, если это не ясно