带有多选复选框的 Antd 选择

Question

我正在使用 antd 的选择组件，我可以在选择选项中呈现复选框。但是在选择复选框时，它会更改为占位符中的标签。如何只多选复选框而不将其呈现为占位符中的标记

我的代码在链接https://codesandbox.io/s/confident-gauss-v7yrv?file=/src/App.js:0-807

import React from "react";
import "./styles.css";
import { Select, Checkbox } from "antd";
import "antd/dist/antd.css";
const { Option, OptGroup } = Select;
export default function App() {
  return (
    <div className="App">
      <Select placeholder="selections" style={{ width: 150 }}>
        <OptGroup label="Gender">
          <Option value="male">
            <Checkbox>Male</Checkbox>
          </Option>
          <Option value="female">
            <Checkbox>Female</Checkbox>
          </Option>
        </OptGroup>
        <OptGroup label="Status">
          <Option value="prepaid">
            <Checkbox>Single</Checkbox>
          </Option>
          <Option value="postpaid">
            <Checkbox>Married</Checkbox>
          </Option>
        </OptGroup>
      </Select>
    </div>
  );
}

Answer 1

例如，您可以绑定一个值并且从不更改它

<Select placeholder="selections" style={{ width: 150 }} value="">