Вы можете установить имя компонента и получить его во время обработки handleSelect и получить значение напрямую (например, работает, если вы используете пользовательские элементы управления из начальной загрузки 4).Не забудьте использовать другое имя для индекса в опциях.
handleSelect = (event) => {
let name = event.target.name;
let value = event.target.value;
// perform action
...
}
, а затем при рендеринге создайте уникальное имя на карте, например, name={"optionsSelect_" + el + "_" + index} или как вам будет угодно:
...
{ this.state.parentArray.map((el, index) =>
<div key={index} className="selectDropdown ">
{ this.state.optionsArray.map((el, index) => {
return <Select
key={index}
name={"optionsSelect_" + el + "_" + index}
className="userOptionSelectDropdown"
placeholder="Select Variable"
value={this.state.selectedOption}
onChange={(event) => this.handleSelect(event)}
onSelect={(event) => this.handleSelect(event)}
options={this.state.fields.map((field, index2) => {
return {value: index2, label: field.name;
})} />
})}
</div>
)
}
...
Если установка имени не работает, вы также можете попробовать ссылки:
...
{ this.state.parentArray.map((el, index) =>
<div key={index} className="selectDropdown ">
{ this.state.optionsArray.map((el, index) => {
return <Select
key={index}
ref={a => (this["optionsSelect_" + el + "_" + index] = a)}
name={"optionsSelect_" + el + "_" + index}
className="userOptionSelectDropdown"
placeholder="Select Variable"
value={this.state.selectedOption}
onChange={(event) => this.handleSelect(event)}
onSelect={(event) => this.handleSelect(event)}
options={this.state.fields.map((field, index2) => {
return {value: index2, label: field.name;
})} />
})}
</div>
)
}
...
, а затем получить его в свой дескриптор (вы получите полный компонент):
handleSelect = (event) => {
let name = event.target.name;
let element = this[name];
// perform action
...
}
Существует множество способов получения выбранного значения с использованием чистого JavaScript, смотрите здесь .
Это очень важно!
если вам нужно изменить состояние на основе предыдущего состояния, не делайте этого:
...
const optionsArray = [...this.state.optionsArray];
let selectedOption = event.label;
optionsArray[index]= event.target.value;
this.setState({
optionsArray,
selectedOption: event.label,
})
...
setState также получает функцию и выдаст вам предыдущее состояние для ее обработки,внесите любые необходимые изменения и ОБЕСПЕЧИТЕ , что они будут установлены правильно.
...
this.setState(prevState => {
// get current state
let newOptionsArray = prevState.optionsArray;
let selectedOption = event.label; // or whatever
newOptionsArray[index]= event.target.value; // or whatever
return({
optionsArray: newOptionsArray,
selectedOption: event.label,
});
});
...
Прочтите в официальных документах , чтобы понять, как работает setState.