MUI Autocomplete组件初始预定义值与动态匹配实现问题

你的代码主要存在变量名未定义、事件参数使用错误、缺少输入文本跟踪逻辑等问题，以下是修正后的实现方案：

核心问题分析 #

1. 原代码里optionsData和optionsFiltered未定义，应对应你声明的allNumbers和initialNumbers
2. MUI Autocomplete的onChange参数并非e.target.value，正确参数格式是(event, newValue)
3. 需单独跟踪用户输入文本，不能复用选中值状态，否则选中后无法切换回初始列表

完整实现代码 #

import { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

const NumberAutocomplete = ({ id }) => {
  // 跟踪选中的值
  const [selectedValue, setSelectedValue] = useState(null);
  // 跟踪用户输入的搜索文本
  const [inputValue, setInputValue] = useState('');

  // 生成1到50的数字数组
  const allNumbers = Array.from({ length: 50 }, (_, i) => i + 1);
  // 初始展示的数字列表
  const initialNumbers = [1, 6, 10, 12, 24];

  // 自定义过滤逻辑：输入时匹配包含输入内容的数字
  const filterOptions = (options, { inputValue }) => {
    if (!inputValue) return options;
    return options.filter(num => num.toString().includes(inputValue));
  };

  return (
    <Autocomplete
      id={id}
      // 无输入时显示初始列表，有输入时显示全量数字并过滤
      options={inputValue ? allNumbers : initialNumbers}
      filterOptions={filterOptions}
      // 处理选中值变化
      onChange={(event, newValue) => {
        setSelectedValue(newValue);
      }}
      // 处理输入文本变化
      onInputChange={(event, newInputValue) => {
        setInputValue(newInputValue);
      }}
      value={selectedValue}
      // 渲染输入框（必须配置）
      renderInput={(params) => (
        <TextField {...params} label="选择数字" variant="outlined" />
      )}
    />
  );
};

export default NumberAutocomplete;

关键逻辑说明 #

• 用inputValue状态单独跟踪用户输入，区分「选中值」和「输入文本」两个独立状态
• options属性根据inputValue是否为空切换数据源：空值时用初始列表，非空时用全量数字列表
• 自定义filterOptions实现数字的模糊匹配，确保输入时显示所有符合条件的数字
• 正确使用Autocomplete的onChange和onInputChange，分别处理选中事件和输入事件

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