在antd中,如果使用了Drag and Drop,则可能会导致下拉菜单无法正确显示。为了解决这个问题,可以使用以下代码示例:
import { Select } from 'antd';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const { Option } = Select;
const onDragEnd = (result, dropdownOptions, setDropdownOptions) => {
if (!result.destination) {
return;
}
const items = reorder(
dropdownOptions,
result.source.index,
result.destination.index
);
setDropdownOptions(items);
};
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
const DragDropSelect = ({ options, setOptions }) => {
const [dropdownOptions, setDropdownOptions] = useState(options);
return (
onDragEnd(result, dropdownOptions, setDropdownOptions)}
>
{(provided) => (
)}