Как обрабатывать два входа, которые зависят друг от друга?

Question

Допустим, что я должен <select> списков:.

<select valueLink={this.linkState('parent')}>...</select> 
<select valueLink={this.linkState('child')}>...</select> 

Ребенка выбора зависит от родительского выбора (когда родитель выбирается тогда ребенок наполнен новыми возможностями и его значение устанавливается для первого варианта по умолчанию

Проблема заключается в том, что для того, чтобы «перезагрузить» дочерний элемент, мне нужно было бы установить состояние компонента в ответ на событие изменения состояния, которое сильно обескуражило AFAIK. Как справиться с этой ситуацией?

Answer 1

Если я понимаю вашу проблему правильно, это может помочь.

JSFIDDLE

Изменяя какие варианты выбора еще мы автоматически сбросить его, когда мы изменяем первый выбор. Я также сделал второй выбор полностью зависящим от состояния первого select.

<select valueLink={this.linkState('select')}> 
    {this.renderOptions(Object.keys(this.selectOptions))} 
</select> 
<select> 
    {this.renderOptions(this.selectOptions[this.state.select])} 
</select> 

дайте мне знать, если я неправильно понял вашу проблему.

Update/EDIT:

Я думаю, что я понимаю ваш вопрос немного больше. В этом случае у вас сложная связь с вашими двумя входами и не может полагаться на соотношение 1: 1, которое дает вам this.linkState().

В этом случае я добавил собственный метод onChange для первого выбора и задал значение и начальное значение второго выбора. Поскольку второй выбор не делает ничего интересного, мы можем использовать linkState на нем просто отлично.

UPDATED FIDDLE

<select onChange={this.handleMainSelectChange}> 
    {this.renderOptions(Object.keys(this.selectOptions))} 
</select> 
<select valueLink={this.linkState('secondSelection')}> 
    {this.renderOptions(this.selectOptions[this.state.mainSelection])} 
</select> 

И нажмите обработчик

handleMainSelectChange: function (event) { 
    var value = event.target.value; 

    this.setState({ 
     mainSelection: value, 
     secondSelection: this.selectOptions[value][0] 
    });