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

要实现复选下拉框（Checkbox Dropdown）的默认值，你可以使用 React 的状态（state）来管理选中的值。下面是一个示例代码：

首先，创建一个复选下拉框组件（CheckboxDropdown）：

import React, { useState } from 'react';

const CheckboxDropdown = () => {
  const [selectedValues, setSelectedValues] = useState([]);
  const [isOpen, setIsOpen] = useState(false);

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

  const handleToggle = () => {
    setIsOpen(!isOpen);
  };

  const handleSelect = (value) => {
    if (selectedValues.includes(value)) {
      setSelectedValues(selectedValues.filter((val) => val !== value));
    } else {
      setSelectedValues([...selectedValues, value]);
    }
  };

  return (
    <div>
      <div onClick={handleToggle}>点击选择</div>
      {isOpen && (
        <div>
          {options.map((option) => (
            <label key={option.value}>
              <input
                type="checkbox"
                checked={selectedValues.includes(option.value)}
                onChange={() => handleSelect(option.value)}
              />
              {option.label}
            </label>
          ))}
        </div>
      )}
    </div>
  );
};

export default CheckboxDropdown;

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

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

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

export default App;

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

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