Question

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

列表 - ＆gt;物品1， 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的列表，它会创建X selects和X states以进行更新？

Answer 1

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

state = {
    items: []
}

然后，当您动态添加select时，必须在此数组中添加新值

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

最后，渲染选择

时

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

Answer 2

希望以下代码段对您有所帮助，

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

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

2 个答案: