Javascript 将下拉列表从材质UI转换为引导

我需要进行此转换，因为材质UI的下拉列表看起来很糟糕

除此之外，代码运行良好。它是一个具有多个选项的下拉列表，它加载字符串及其相应图像的列表，并且当它们被该类别过滤时，表中会显示类别

这是物料界面的工作代码：

import {
  Select,
  MenuItem,
  FormControl,
  InputLabel,
} from '@material-ui/core';

const platforms = ['a', 'b', 'c', 'd'];


    <FormControl className='searchPlatform'>
      <InputLabel id='platforLabel'>Platform</InputLabel>
      <Select
        labelId='platforLabel'
        id='platforLabel'
        value={this.props.platformFilter}
        renderValue={this.getSelectedPlatformFilter}
        onChange={this.handleChangePlatform}
        multiple
      >
        {platforms.map((platform) => (
          <MenuItem key={platform} value={platform}>
            <div>
              <img
                src={this.showicon(platform)}
                alt=''
                height={17}
                width={17}
              />
              {platform}
            </div>
          </MenuItem>
        ))}
      </Select>
    </FormControl>

---

尝试选择

组件上的
属性，因为它是在选择菜单项时触发的回调

（eventKey:any，event:Object）=>any

可能是这样的：


下拉按钮
// ... 代码的其余部分
我的回答对@Leo有帮助吗？
import { Dropdown } from 'react-bootstrap';

<Dropdown>
          <Dropdown.Toggle variant='success' id='dropdown-basic'>
            Dropdown Button
          </Dropdown.Toggle>
          <Dropdown.Menu
            value={this.props.platformFilter}
            renderValue={this.getSelectedPlatformFilter}
            onChange={this.handleChangePlatform}
          >
            {platforms.map((platform) => (
              <Dropdown.Item
                eventKey={platform}
                value={platform}
                onClick={this.handleChangePlatform}
              >
                <div>
                  <img
                    src={this.showicon(platform)}
                    alt=''
                    height={17}
                    width={17}
                  />
                  {platform}
                </div>
              </Dropdown.Item>
            ))}
          </Dropdown.Menu>
        </Dropdown>