Как динамически создавать выборки и состояния при реагировании с использованием пользовательского интерфейса материала?

Question

Мне нужно создать компоненты Select на основе списка выбора, который у меня есть, например:

Список -> item1, item2

Компонент:

<Select 
  value={this.state."NAME OF THE ITEM ON THE LIST"}
  onChange={this.handleChange}
 <MenuItem value={X} key={X} > Something </MenuItem> (the MenuItem part is working)
</Select>

Так как select component нужно значение, а мне нужно, чтобы это значение было state, поэтому при щелчке по нему вызывается метод handleChange и обновляется состояние следующим образом:

handleChange = (event) => {
    this.setState({
        "THE NAME OF THE ITEM ": event.target.value(this comes from the MenuItem)
    });
};

Как я могу создать state динамически, поэтому, если у меня есть список с X itens, он создаст X selects и X states для обновления?

Answer 1

надеюсь, что фрагмент кода ниже вам поможет,

{this.props.data.map((e, keyIndex) => {
    return (<MenuItem key={keyIndex} value={e.warehouseId}>{e.name}</MenuItem>);
 })
}

Answer 2

Вы можете использовать свойство массива в вашем штате для управления этими элементами

state = {
    items: []
}

Затем, когда вы динамически добавляете выбор, вы должны добавить новое значение в этот массив

addItem = () => {
    this.setState({
        items: [
            ...this.state.items, // previous items
            { value: ""} // plus the new one
        ]
    });
};

И, наконец, при рендеринге Select

<Select
  value={this.state.items[index].value
  onChange={event => {
    this.setState({ // map over the array to modify the matching item
      items: this.state.items.map(
        (item, idx) =>
          idx === index ? {...item, value: event.target.value} : item
      )
    });
  }}>