Question

我正在尝试使用Material-UI建立一个按类别对项目进行分类的下拉列表，例如：

Category1 (not clickable) 
test1 
test2 
Category2 (not clickable) 
test3
test4

我尝试了以下操作，但是Select组件不接受两个maps。知道如何实现吗？

import Select from '@material-ui/core/Select'
import MenuItem from '@material-ui/core/MenuItem'

    <Select value={value} onChange={handleChange}>
      {items.map(item=> (
             <MenuItem value="">
                <em> {item.category}</em>
             </MenuItem>
          {item.tags.map(i=> (
            <MenuItem value={i} key={i}>
              {i}
            </MenuItem>
          ))}
      ))}
    </Select>

Answer 1

我只是自己遇到了这个问题。两种语法形式的片段都不起作用。问题有点老了，但是对于其他有此问题的人，这是我使用的解决方法。

在组件主体而不是返回函数中构建所需的MenuItem组件列表。然后将此列表插入组件的返回jsx。

例如：

export default myComponent = ( props ) => {

  const menuItems = []  // build the list of menu components
    allThings.forEach( (v, index) => {
    if( somecondition is met) {
      menuItems.push(<Divider/>)
    }
    menuItems.push(<MenuItem style={{display: ""}} key={index} name={v.name} value={index}>{v.name}</MenuItem>)
  })

return (
  <Select 
  value={vendorIndex}
  onChange={( event ) => {onChangeHandler( event )}}
  id="select">
    {menuItems}  // We insert the list here
  </Select>
)

下拉列表按类别排序

1 个答案: