Antd <Select> 元素以 <Menu> 作为下拉列表不起作用，无法加载 Menu.Item 选项

Question

const 对象这样定义

  const [selectedItems, setSelectedItems] = useState([]);

  const options = [
    {
      key: 'A',
      value: 'A',
      label: 'A'
    },
    {
      key: 'S',
      value: 'S',
      label: 'S'
    },
    {
      key: 'W',
      value: 'W',
      label: 'W'
    },
    {
      key: 'C',
      value: 'C',
      label: 'C'
    },
  ];

选择元素定义

<Select
              mode='multiple'
              value={selectedItems}
              defaultValue={options}
              showSearch={true}
              allowClear
              optionLabelProp='label'
              placeholder={
                <div>
                  {' '}
                  <img
                    src={xImg}
                    alt='xImg'
                    style={{ width: 14, height: 14, objectFit: 'cover' }}
                  />{' '}
                  &nbsp; Place Holder &nbsp;{' '}
                </div>
              }
              style={{ width: '100%' }}
              dropdownRender={  () => {
                <Menu style={{ width: 256, alignContent: 'center' }}>
                  {options.map((option) => (
                        <Menu.Item
                          key={option.key}
                          onClick={e => {
                            if (selectedItems.includes(option.label)) {
                              const newArray = selectedItems.filter(val => val !== option.label)
                              setSelectedItems(newArray)
                            } else {
                              const newArray = [...selectedItems, option.label]
                              setSelectedItems(newArray)
                            }
                          }}
                        >
                          {option.label}
                          <Checkbox style={{ float: 'left' }} checked={selectedItems.includes(option.label)} />
                        </Menu.Item>
                  ))}
                </Menu>
              }}
            />

我是否以正确的方式使用了dropdownRender？

我尝试禁用 value={} defaultValue={} 和 placeholder{} 属性进行选择，还尝试删除 Menu.Item 的 onClick 操作，但没有帮助。

Answer 1

问题出在 dropdownRender 函数上。 dropdownRender 函数预计会返回自定义下拉菜单，但目前的编写方式不会返回任何内容。这是因为 Menu 组件周围使用大括号 {} 而不是圆括号 ()，导致隐式未定义返回。

检查此代码：

import React, { useState } from 'react';
import { Select, Menu, Checkbox } from 'antd';

const CustomSelect = () => {
  const [selectedItems, setSelectedItems] = useState([]);

  const options = [
    {
      key: 'A',
      value: 'A',
      label: 'A'
    },
    {
      key: 'S',
      value: 'S',
      label: 'S'
    },
    {
      key: 'W',
      value: 'W',
      label: 'W'
    },
    {
      key: 'C',
      value: 'C',
      label: 'C'
    },
  ];

  return (
    <Select
      mode="multiple"
      value={selectedItems}
      showSearch
      allowClear
      optionLabelProp="label"
      placeholder={
        <div>
          {' '}
          <img
            src="path/to/xImg.png"
            alt="xImg"
            style={{ width: 14, height: 14, objectFit: 'cover' }}
          />{' '}
          &nbsp; Place Holder &nbsp;{' '}
        </div>
      }
      style={{ width: '100%' }}
      dropdownRender={() => (
        <Menu style={{ width: 256, alignContent: 'center' }}>
          {options.map((option) => (
            <Menu.Item
              key={option.key}
              onClick={() => {
                if (selectedItems.includes(option.label)) {
                  const newArray = selectedItems.filter(val => val !== option.label);
                  setSelectedItems(newArray);
                } else {
                  const newArray = [...selectedItems, option.label];
                  setSelectedItems(newArray);
                }
              }}
            >
              {option.label}
              <Checkbox style={{ float: 'left' }} checked={selectedItems.includes(option.label)} />
            </Menu.Item>
          ))}
        </Menu>
      )}
    />
  );
};

export default CustomSelect;

检查此链接，我为此做了一个演示： CodeSandbox - 链接

注意的问题：

1. 在 dropdownRender 中使用括号 () 代替大括号 {}
2. 从 Select 元素中删除了 defaultValue={options}