How to handle two inputs which depend on each other? - reactjs

Question

Let's say that I have to <select> lists:
<select valueLink={this.linkState('parent')}>...</select>
<select valueLink={this.linkState('child')}>...</select>
Child select depends on parent select (when parent is selected then child is filled with new options and its value is set to first option by default.
The problem is that in order to "reset" child select I would have to set component state in response to state-change event, which is highly discouraged AFAIK. So how to handle this situation?

Answer 1

If I understand your issue correctly, this may help.
JSFIDDLE
By changing what options the select has we automatically reset it when we change the first select. I've also made the second select completely dependent on the first select's state.
<select valueLink={this.linkState('select')}>
{this.renderOptions(Object.keys(this.selectOptions))}
</select>
<select>
{this.renderOptions(this.selectOptions[this.state.select])}
</select>
let me know if I misunderstood your issue.
Update / EDIT:
I think I understand your issue a bit more. In this case you have a complicated relationship with your two inputs, and can't rely on the 1:1 relationship that this.linkState() gives you.
In this case I added a custom onChange method to the first select and set the value and initial value of the second selection from that. Since the second selection isn't doing anything fancy we can use linkState on it just fine.
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>
And the click handler
handleMainSelectChange: function (event) {
var value = event.target.value;
this.setState({
mainSelection: value,
secondSelection: this.selectOptions[value][0]
});