时间戳

首页 > 解决方案 > 如何使用 Material UI 动态创建选择和状态？

reactjs - 如何使用 Material UI 动态创建选择和状态？

问题描述

我需要根据我拥有的选择列表创建选择组件，例如：

列表-> 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需要一个值并且我需要该值是 a state，因此当它被单击时，它将调用该方法handleChange并像这样更新状态：

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

如何state动态创建，所以如果我有一个带有 X 的列表，它将创建要更新的Xselects和 X ？states

标签： reactjslistselectstatematerial-ui

解决方案

您可以使用您所在州的数组属性来管理这些项目

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
      )
    });
  }}>

推荐阅读