React Carbon Select组件如何设置可修改的默认选中值？

问题根源 #

你的代码直接将defaultSelected绑定到Select的value属性，但未与组件内部state联动，导致用户修改选项时state无法同步更新，组件无法响应变化；同时SelectItem的text属性错误使用了option.value，会导致显示内容不符合预期。

修正方案 #

1. 初始化state注入默认值：把props传入的defaultSelected作为formData的初始值，确保组件加载时就有正确的默认选中项。
2. 受控组件绑定state值：将Select的value绑定到state中的formData.fruit，用户操作时state更新，组件会自动同步选中状态。
3. 修正选项文本显示：把text={option.value}改为text={option.text}，显示定义好的带emoji的选项文本。
4. 优化state更新逻辑：使用函数式更新state，避免因state异步更新导致的状态覆盖问题。

修正后的完整代码 #

import React, { useState } from 'react';
import { Select, SelectItem } from '@carbon/react';

const options = [
  {
    value: 'apple',
    text: 'Apple 🍏',
  },
  {
    value: 'banana',
    text: 'Banana 🍌',
  },
  {
    value: 'kiwi',
    text: 'Kiwi 🥝',
  },
];

const SelectCarbon = ({ defaultSelected }) => {
  // 初始化state，将defaultSelected作为fruit的初始值
  const [formData, setFormData] = useState({ fruit: defaultSelected });

  const onChange = e => {
    // 使用函数式更新，确保获取到最新的state
    setFormData(prev => ({
      ...prev,
      fruit: e.target.value,
    }));
  };

  console.log('formData', formData);

  return (
    <>
      <Select 
        id="select-fruits" 
        onChange={onChange} 
        // 绑定到state中的fruit值，实现受控组件
        value={formData.fruit}
      >
        <SelectItem text="Select Option" value="" />
        {options.map(option => (
          <SelectItem
            key={option.value}
            // 修正text属性，显示正确的选项文本
            text={option.text}
            value={option.value}
          />
        ))}
      </Select>
    </>
  );
};

export default SelectCarbon;

额外说明 #

• 若仅需设置默认值、不控制后续变化，可使用defaultValue={defaultSelected}，但编辑场景更推荐受控组件，方便统一管理表单状态。
• 确保defaultSelected的值是options数组中存在的value值，否则默认选中项不会生效。

内容的提问来源于stack exchange，提问作者FD3