react实现给多选下拉框添加默认值

要给多选下拉框添加默认值，你可以使用 React 的状态（state）来实现。下面是一个示例代码：

首先，创建一个带有选项的下拉框组件（Dropdown）：

import React, { useState } from 'react';

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

  const handleSelect = (event) => {
    const { value } = event.target;

    // 判断当前选项是否已经被选中
    if (selectedValues.includes(value)) {
      // 如果已经选中，则从已选中的值中移除
      setSelectedValues(selectedValues.filter((val) => val !== value));
    } else {
      // 如果未选中，则添加到已选中的值中
      setSelectedValues([...selectedValues, value]);
    }
  };

  return (
    <select multiple={true} value={selectedValues} onChange={handleSelect}>
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
      <option value="option3">选项3</option>
    </select>
  );
};

export default Dropdown;

然后，在你的父组件中使用这个下拉框组件，并通过设置默认值来添加默认选项：

import React from 'react';
import Dropdown from './Dropdown';

const App = () => {
  return (
    <div>
      <h1>多选下拉框</h1>
      <Dropdown /> {/* 默认没有选中任何选项 */}
      {/* 或者添加默认选项 */}
      {/* <Dropdown selectedValues={['option1', 'option2']} /> */}
    </div>
  );
};

export default App;

在上面的代码中，我们在父组件中使用了 `Dropdown` 组件，并且可以通过 `selectedValues` 属性来设置默认选项。如果不传入 `selectedValues` 属性，则默认没有选中任何选项。如果你想要添加默认选项，可以将选项值作为数组传递给 `selectedValues` 属性。

这样，你就可以实现给多选下拉框添加默认值了。希望能对你有所帮助！