将下拉菜单从 Material UI 转换为 Bootstrap答案

【问题标题】：Transform a dropdown from Material UI to Bootstrap将下拉菜单从 Material UI 转换为 Bootstrap
【发布时间】：2020-09-01 19:55:15
【问题描述】：

我需要进行此转换，因为 Material UI 的下拉菜单看起来很糟糕。

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

这是 Material 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>

下一个是我用 Bootstrap 尝试过的。我不知道如何触发onChange 的下拉菜单。我尝试将onClick 放在Dropdown.Item 上，以便从Dropdown.Menu 调用与onChange 中相同的触发器

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>

【问题讨论】：

我的回答对@Leo 有帮助吗？

标签： javascript reactjs twitter-bootstrap drop-down-menu material-ui

【解决方案1】：

在<Dropdown> 组件上尝试onSelect 属性，因为它是在选择菜单项时触发的回调。

(eventKey: any, event: Object) => any

应该是这样的：

<Dropdown onSelect={handleChangePlatform}>
          <Dropdown.Toggle variant='success' id='dropdown-basic'>
            Dropdown Button
          </Dropdown.Toggle>
          <Dropdown.Menu>
          // ... rest of code
          </Dropdown.Menu>
</Dropdown>

【讨论】：