react函数组件通过antd中的select组件实现自定义下改变状态，没有被勾选的勾选上，被勾选的取消勾选拉框，且下拉框的内容是多选框，当鼠标选择范围后，在范围内的多选框

可以通过以下代码实现您的需求：

import React, { useState } from "react";
import { Select } from "antd";

const { Option } = Select;

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

  const handleSelect = (value) => {
    let newSelectedItems = [...selectedItems];
    if (newSelectedItems.includes(value)) {
      newSelectedItems = newSelectedItems.filter((item) => item !== value);
    } else {
      newSelectedItems.push(value);
    }
    setSelectedItems(newSelectedItems);
  };

  const getCheckbox = (option) => {
    const isSelected = selectedItems.includes(option.value);
    return (
      <label>
        <input
          type="checkbox"
          checked={isSelected}
          onChange={() => handleSelect(option.value)}
        />
        {option.label}
      </label>
    );
  };

  return (
    <Select
      mode="multiple"
      dropdownRender={(menu) => (
        <div>
          {menu}
          <div>
            <span>Selected items: </span>
            {selectedItems.map((item) => (
              <span key={item}>{item}, </span>
            ))}
          </div>
        </div>
      )}
    >
      <Option value="item1" label={getCheckbox({ value: "item1", label: "Item 1" })}>
        Item 1
      </Option>
      <Option value="item2" label={getCheckbox({ value: "item2", label: "Item 2" })}>
        Item 2
      </Option>
      <Option value="item3" label={getCheckbox({ value: "item3", label: "Item 3" })}>
        Item 3
      </Option>
    </Select>
  );
};

export default MySelect;

这段代码中，我们使用了antd的Select组件，并将其mode属性设置为"multiple"，以支持多选。我们还通过dropdownRender属性自定义了下拉框的渲染方式。

在getCheckbox函数中，我们渲染了一个带有勾选框的标签，并根据当前选中的项来确定勾选框是否被勾选。在handleSelect函数中，我们根据用户的选择来修改selectedItems状态，以反映当前选中的项。

最后，我们将每个Option的label属性设置为getCheckbox函数的返回值，以将勾选框渲染在下拉框中。