react select选择框如何多选

在React中，通常使用`react-select`库来创建下拉选择框组件，如果需要实现多选功能，可以使用`react-select`提供的`multi`属性。以下是基本步骤：

1. 首先，安装`react-select`及其多选版本的依赖：

npm install @material-ui/core @material-ui/icons react-select

或者如果你使用yarn：

yarn add @material-ui/core @material-ui/icons react-select

2. 引入所需组件和样式：

import Select from 'react-select';
// 如果使用Material-UI主题，还需要引入Material-UI组件
import { makeStyles } from '@material-ui/core/styles';

3. 创建一个自定义选项列表（option components），如果需要的话，可以添加一个多选图标或其他自定义标记：

const optionStyles = (base) => ({
  ...base,
  // 添加一个复选标记
  label: {
    ...base.label,
    paddingRight: 20,
    '& svg': {
      marginRight: -4,
    },
  },
});

const Option = (props) => (
  <div style={optionStyles(props)} {...props}>
    {/* 使用Option本身的value作为选择项的内容 */}
    {props.label}
    {/* 自定义复选标记 */}
    {props.isMulti ? <CheckIcon /> : null}
  </div>
);

const CheckIcon = () => <svg>...</svg>; // 根据需求实现具体的复选标记

4. 在组件中使用Select组件并设置`multi`属性为`true`，以及`options`数组包含你的选择数据：

const useStyles = makeStyles((theme) => ({
  select: {
    width: '100%', // 可调整宽度
  },
}));

function MultiSelectComponent() {
  const classes = useStyles();
  const options = [
    // 这里填充你的多选选项
  ];

  return (
    <Select
      className={classes.select}
      multi
      options={options}
      components={{ Option }}
    />
  );
}

5. 使用这个`MultiSelectComponent`并在需要的地方渲染它。