React MUI Autocomplete能否添加独立静态选项？如何实现？

这个需求完全可行，以下是具体实现步骤和修改后的代码：

1. 合并动态选项与静态「Other」选项 #

在组件内定义符合DropdownOptionProps类型的「Other」选项，将其与原有的动态data数组合并，作为Autocomplete的options数据源。

2. 单独渲染「Other」选项 #

在renderOption中判断当前选项是否为「Other」，如果是则单独渲染文本，避免使用动态布局组件；还可以添加分隔线区分动态选项和静态选项。

3. 处理「Other」选项的选中逻辑 #

修改onChange事件，当选中「Other」时触发指定的setFieldValue('pension_fund_name', CommonDropdownItems.Other)，其他情况保持原有逻辑。

修改后的完整代码 #

import { createElement, HTMLAttributes } from 'react'
import { Divider } from '@eframe-ui/react'
import { FilterDropdownProps, DropdownOptionProps } from './types'
import { Translate } from '../translate'
import { Autocomplete, Paper } from '@mui/material'
import { FilterDropdownInput } from './Input'
import { CommonDropdownItems } from './path-to-common-items' // 导入CommonDropdownItems

export const FilterDropdown = ({
  data,
  dropdownDataLayout,
  selectFieldLabel,
  fieldValue,
  errors,
  setFieldValue,
}: FilterDropdownProps) => {
  /* eslint-disable @typescript-eslint/no-explicit-any */
  const CustomPaper = (props: any) => (
    <Paper {...props} sx={{ background: '#f4f7fa', marginTop: '4px' }} />
  )

  // 定义静态「Other」选项，匹配DropdownOptionProps类型
  const otherOption: DropdownOptionProps = {
    label: 'Other',
    value: CommonDropdownItems.Other,
    mixin: {} // 根据实际类型调整，无mixin可设为undefined
  }

  // 合并动态选项与静态选项
  const combinedOptions = [...data, otherOption]

  return (
    <Autocomplete
      freeSolo
      className="gap-y-1 flex flex-col"
      options={combinedOptions} // 使用合并后的选项数组
      getOptionLabel={(option: string | DropdownOptionProps) =>
        (option as { value: string }).value
      }
      // 处理选中逻辑：区分Other选项与普通选项
      onChange={(e, value) => {
        if (value?.value === CommonDropdownItems.Other) {
          setFieldValue('pension_fund_name', CommonDropdownItems.Other)
        } else {
          setFieldValue(fieldValue, value)
        }
      }}
      renderInput={(params) => (
        <FilterDropdownInput
          error={errors}
          params={params}
          label={selectFieldLabel}
        />
      )}
      renderOption={( 
        props: HTMLAttributes<HTMLLIElement>,
        option: DropdownOptionProps,
        state
      ) => {
        // 单独渲染Other选项
        if (option.value === CommonDropdownItems.Other) {
          return (
            <li {...props} className="w-full cursor-pointer">
              <Translate label="Other" />
            </li>
          )
        }

        const { label, mixin } = option

        return (
          <>
            <li {...props} className="w-full cursor-pointer">
              {dropdownDataLayout
                ? createElement(
                    dropdownDataLayout,
                    mixin as Record<string, string>,
                  )
                : label && (
                    <>
                      <Translate label={label} />
                      <Divider className="!my-2" />
                    </>
                  )}
            </li>
            // 在最后一个动态选项后添加分隔线，区分动态与静态选项（可选）
            {state.index === data.length - 1 && <Divider className="!m-0" />}
          </>
        )
      }}
      PaperComponent={CustomPaper}
    />
  )
}

补充说明 #

• 确保CommonDropdownItems.Other的值与otherOption.value完全一致，避免判断逻辑出错。
• 动态布局组件TransferAssetsLayout无需修改，它只会渲染原有的动态选项。
• 分隔线逻辑可根据视觉需求选择是否保留。

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