React/NextJS动态select下拉框Option选中属性添加实现咨询

优化实现方案 #

React中处理select下拉框推荐使用受控组件模式，无需手动给option加selected属性，只要给select绑定value属性，React会自动匹配对应value的option，自动添加selected状态。
针对你的代码可以做如下优化：

1. 核心改动点 #

• 新增本地状态存储当前选中值（如果选中值由父组件维护，可直接从props获取对应字段代替本地state）
• 抽离重复的分类渲染逻辑，删掉冗余的Application、Benefit子组件
• 修复activeProp分支下option缺失value属性的bug
• 把原来的非受控select（用defaultValue）改为受控select（用value）

2. 优化后完整代码 #

import { useState } from 'react';
import styles from '../../styles/Components/SubFilterSelect.module.scss';

const SubFilterSelect = (props) => {
  // 新增选中状态，初始值为DEFAULT
  const [selectedValue, setSelectedValue] = useState('DEFAULT');

  const handleChange = (event) => {
    const value = event.target.value;
    setSelectedValue(value); // 更新本地选中状态
    props.subFunc?.(value); // 兼容无subFunc的情况
  };

  // 抽离获取当前激活的分类类型逻辑
  const getActiveCategoryType = () => {
    if (props.activeApp) return 'Application';
    if (props.activeBenefit) return 'Benefit';
    if (props.activeProp) return 'Property';
    return null;
  };

  const activeType = getActiveCategoryType();
  // 过滤对应类型的分类
  const filteredCategories = activeType 
    ? props.categories.filter(item => item?.data?.parent_category === activeType)
    : [];

  return (
    <section className={styles.filterSection}>
      <select 
        onChange={handleChange} 
        value={selectedValue} // 绑定选中值，React会自动匹配option加selected
        disabled={!activeType} // 未激活时禁用选择
      >
        <option value='DEFAULT'>
          {activeType ? 'Choose a Category' : 'Choose a Filter Above'}
        </option>
        {filteredCategories.map((category, index) => (
          <option 
            key={index} 
            value={category.id}
          >
            {category.data.name}
          </option>
        ))}
      </select>
    </section>
  )
}

export default SubFilterSelect

3. 补充说明 #

如果你的选中值需要由父组件统一维护，只需要删掉本地的selectedValue state，改为从props接收selectedValue字段，同时把handleChange里的setSelectedValue去掉即可，父组件在subFunc中更新自己维护的选中值再传给SubFilterSelect组件就行。

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