如何在Material-UI Select组件中添加自定义可输入TextField？

要实现下拉菜单末尾添加自定义输入且同步显示的功能，核心是把输入框的状态和Select的选中状态联动起来，同时处理好下拉菜单的渲染逻辑。直接嵌套TextField到MenuItem但未同步状态的话，自然看不到输入内容，下面是具体实现步骤和代码：

• 维护两个状态：selectedAge 存储最终选中的值（预设选项或自定义输入），customInput 存储输入框的临时输入内容
• 在Select的下拉菜单最后添加包含TextField的MenuItem，绑定customInput状态，输入时同步更新selectedAge
• 自定义Select的renderValue方法，确保自定义输入能正确显示在主控件上
• 处理Select的onChange事件，区分选择预设选项还是输入自定义内容的场景

完整代码示例 #

import React, { useState } from 'react';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import TextField from '@mui/material/TextField';

const AgeSelect = () => {
  // 预设年龄选项
  const ageOptions = [18, 20, 25, 30, 35];
  // 选中值状态，自定义输入会存在这里
  const [selectedAge, setSelectedAge] = useState('');
  // 输入框临时值状态
  const [customInput, setCustomInput] = useState('');

  // 处理Select选中事件
  const handleSelectChange = (event) => {
    setSelectedAge(event.target.value);
    // 选择预设选项时清空输入框
    setCustomInput('');
  };

  // 处理自定义输入变化
  const handleCustomInputChange = (event) => {
    const inputValue = event.target.value;
    setCustomInput(inputValue);
    // 实时同步到选中值，让下拉和主控件都能显示
    setSelectedAge(inputValue);
  };

  // 自定义Select显示值的渲染逻辑
  const renderSelectedValue = (value) => {
    return value || '请选择年龄';
  };

  return (
    <Select
      value={selectedAge}
      onChange={handleSelectChange}
      renderValue={renderSelectedValue}
      style={{ width: 200 }}
    >
      {/* 渲染预设年龄选项 */}
      {ageOptions.map((age) => (
        <MenuItem key={age} value={age}>
          {age}
        </MenuItem>
      ))}
      {/* 自定义输入选项 */}
      <MenuItem value={customInput}>
        <TextField
          value={customInput}
          onChange={handleCustomInputChange}
          placeholder="输入自定义年龄"
          size="small"
          fullWidth
          autoFocus
        />
      </MenuItem>
    </Select>
  );
};

export default AgeSelect;

关键注意点 #

• 把customInput同步给selectedAge是核心，这样不管是选择预设还是输入自定义，Select的选中状态都能实时更新，下拉菜单里的输入内容也会跟着显示
• 用renderValue自定义主控件的显示内容，避免默认逻辑只识别预设选项的问题
• 选择预设选项时清空输入框，避免状态冲突

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