Вы находитесь на правильном пути с тем, что вы настроили.Разница здесь в некотором сдвиге в мыслительном процессе - с чем-то вроде jQuery вы бы подключили события к элементам на основе идентификатора, а затем обновили бы их непосредственно через события, где, как и в случае реакции, вы подключаете обработчики событий при рендеринге, а затем обновляете состояние.когда запускаются события, которые затем повторно визуализируются с новым состоянием;
Первый - поскольку у вас два разных автомобиля / производителя, вам потребуются переменные состояния для каждого из них, чтобы сохранить два разных значения и их модели (например, selectedMainProducer, selectedCompareProducer, mainCarModels, compareCarModels).Кроме того, в этом случае лучше иметь отдельные обработчики событий, чтобы различать, какой выбор используется, и установить соответствующее состояние:
<SelectComponent onOptionSelected={this.onMainProducerSelected} ... />
...
<SelectComponent onOptionSelected={this.onCompareProducerSelected} ... />
...
, а затем сохранить два различных значения и их модели в вашем состоянии, например:
onMainProducerSelected = (selectedValue) => {
this.setState({
selectedMainProducer: selectedValue,
},() => {
axios.get(api + this.state.selectedMainProducer.value).then(response => {
var data = response.data
this.setState({
mainCarModels: parseCarModels(data), // <-- separate models
});
});
});
}
onCompareProducerSelected = (selectedValue) => {
this.setState({
selectedCompareProducer: selectedValue,
},() => {
axios.get(api + this.state.selectedCompareProducer.value).then(response => {
var data = response.data
this.setState({
compareCarModels: parseCarModels(data), // <-- separate models
});
});
});
}
С этим вы затем визуализируете свои вторичные выборы на основе вашего состояния selectedMainProducer и selectedCompareProducer.
например,
<SelectComponent selectOptions={this.state.mainCarModels} ... />
...
<SelectComponent selectOptions={this.state.compareCarModels} ... />
...