react + antd-mobile 实现下拉多选具体代码

下拉多选可以使用antd-mobile的CheckboxItem组件来实现。具体代码如下：

import React, { useState } from 'react';
import { List, Checkbox } from 'antd-mobile';

const CheckboxItem = Checkbox.CheckboxItem;

const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
  { label: '选项4', value: '4' },
];

const MultipleSelect = () => {
  const [selectedValues, setSelectedValues] = useState([]);

  const handleCheckboxChange = (value) => {
    const currentIndex = selectedValues.indexOf(value);
    const newValues = [...selectedValues];
    if (currentIndex === -1) {
      newValues.push(value);
    } else {
      newValues.splice(currentIndex, 1);
    }
    setSelectedValues(newValues);
  };

  return (
    <List>
      {options.map((option) => (
        <CheckboxItem
          key={option.value}
          checked={selectedValues.indexOf(option.value) !== -1}
          onChange={() => handleCheckboxChange(option.value)}
        >
          {option.label}
        </CheckboxItem>
      ))}
    </List>
  );
};

export default MultipleSelect;

上面的代码中，我们定义了一个`options`数组来存储选项列表。然后使用`useState`来管理已选中的值，初始值为空数组。在`handleCheckboxChange`方法中，我们根据选项的值来判断它是否已经被选中，如果已经被选中，则从已选中的值数组中删除该值，否则将该值添加到已选中的值数组中。最后通过`setSelectedValues`更新已选中的值数组。

在渲染时，我们遍历选项列表，并为每个选项渲染一个`CheckboxItem`组件。我们使用`checked`属性来判断该选项是否已经被选中，使用`onChange`事件来处理选项的选择和取消选择操作。