是否可以显示选中了初始值的角度材料的多选组件？

在软件开发中，多选组件是一种常见的用户界面元素，允许用户从一组选项中选择一个或多个值。在某些情况下，您可能希望在组件初始化时显示已选中的初始值。这通常涉及到组件的状态管理和数据绑定。

基础概念

多选组件：一种允许用户选择多个选项的UI控件。
初始值：组件在加载时预设的值。
状态管理：跟踪和管理组件状态的过程。

类型

静态初始值：在代码中硬编码的初始值。
动态初始值：从服务器获取或根据用户之前的选择设置的初始值。

应用场景

表单填写：用户在填写复杂表单时，某些字段可能有默认选项。
配置管理：在设置系统参数时，显示当前配置以便用户查看或修改。
数据分析：在数据可视化工具中，预设筛选条件。

实现方法

以下是一个简单的示例，展示如何在React中使用useState钩子来设置和显示多选组件的初始值：

import React, { useState } from 'react';

const MultiSelectComponent = () => {
  // 初始值数组
  const initialSelectedValues = ['Option1', 'Option3'];

  // 使用useState设置初始状态
  const [selectedValues, setSelectedValues] = useState(initialSelectedValues);

  return (
    <div>
      <select multiple value={selectedValues} onChange={(e) => setSelectedValues(Array.from(e.target.selectedOptions, option => option.value))}>
        <option value="Option1">Option 1</option>
        <option value="Option2">Option 2</option>
        <option value="Option3">Option 3</option>
        <option value="Option4">Option 4</option>
      </select>
      <p>Selected Values: {selectedValues.join(', ')}</p>
    </div>
  );
};

export default MultiSelectComponent;