代码之家 › 专栏 › 技术社区 › Lucio Zenir

如何使用材质UI在react上动态创建选择和状态?

material-ui state select list reactjs

Lucio Zenir · 技术社区 · 6 年前

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

列表->项目1, 项目2

组件:

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

如何创建 状态 因此,如果我有一个包含X个iten的列表,它将创建X selects 还有X states 是否要更新?

2 回复 | 直到 6 年前

Arnaud Christ 6 年前

您可以在您的状态中使用数组属性来管理这些项

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

Venkat Ch 5 年前

希望下面的代码片段能对您有所帮助,

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

推荐文章

danial · 如何在多个字符串的每个位置找到最频繁的字符

2 年前

user19657580 · 在Python中打印两个numpy数组的列表

2 年前

shekharsabale · 从列表元素捕获子字符串

2 年前

The Great · 拆分并存储数据帧,但名称基于特定列中的唯一值

2 年前

Lakshya Kashyap · 如何先按数字降序排序,然后按字母升序排序

2 年前

user19657580 · Python中数组中具有相同元素的索引求和

2 年前

Klimt865 · Python中的列表列表

2 年前

Klimt865 · 在Python中将数组列表转换为列表列表

2 年前

dekt · 获取数字列表Top N、next Top N和last Top N的索引

2 年前

FÄÅ ÛÅ · 字典、列表和字符串

2 年前