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

let's have <select> lists:

<select valuelink={this.linkstate('parent')}>...</select> <select valuelink={this.linkstate('child')}>...</select> 

child select depends on parent select (when parent selected child filled new options , value set first option default.

the problem in order "reset" child select have set component state in response state-change event, highly discouraged afaik. how handle situation?

if understand issue correctly, may help.

jsfiddle

by changing options select has automatically reset when change first select. i've made second select dependent on 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 misunderstood issue.

update / edit:

i think understand issue bit more. in case have complicated relationship 2 inputs, , can't rely on 1:1 relationship this.linkstate() gives you.

in case added custom onchange method first select , set value , initial value of second selection that. since second selection isn't doing fancy can use linkstate on 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 click handler

   handlemainselectchange: function (event) {     var value = event.target.value;      this.setstate({         mainselection: value,         secondselection: this.selectoptions[value][0]     });