React Material UI Autocomplete：如何让输入框值为ID而非标签？

要实现输入框显示ID、下拉选项显示标签的效果，你需要调整Autocomplete的核心配置，同时自定义下拉选项的渲染逻辑：

修改后的完整代码：

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

const TabLead = ({ lead, sources, lead_problems }) => {
  // 存储选中的选项对象
  const [selectedOption, setSelectedOption] = useState(null);
  const [selectedProblemId, setSelectedProblemId] = useState(lead.problem_id); 

  // 根据初始problem_id匹配对应的选项对象
  useEffect(() => {
    if (lead.problem_id && lead_problems.length) {
      const matchedOption = lead_problems.find(opt => opt.id === lead.problem_id);
      setSelectedOption(matchedOption);
    }
  }, [lead.problem_id, lead_problems]);

  return (
    <div className="row">
        <Autocomplete 
          id="problem_id"  
          options={lead_problems}
          // 指定输入框显示选项的ID
          getOptionLabel={(option) => option.id.toString()}
          // 自定义下拉选项，展示标签文本
          renderOption={(props, option) => (
            <li {...props}>{option.label}</li>
          )}
          value={selectedOption}
          // 通过ID判断选项与选中值是否匹配
          isOptionEqualToValue={(option, value) => option.id === value.id}
          onChange={(event, option) => {  
            setSelectedOption(option);
            setSelectedProblemId(option?.id || "");
          }}
          renderInput={(params) => (
            <TextField 
              margin="normal" 
              {...params} 
              label="Problem" 
              // 强制输入框value为选中的ID
              inputProps={{
                ...params.inputProps,
                value: selectedProblemId || ''
              }}
            />
          )} 
        />
    </div>
  )
}

export default TabLead

关键修改说明 #

• getOptionLabel：设置为返回选项的id，让Autocomplete以ID作为输入框显示值的基础
• renderOption：自定义下拉选项的渲染内容，展示选项的label文本，保证下拉列表显示正常的标签
• value与isOptionEqualToValue：使用选项对象作为Autocomplete的value，通过id判断选项是否匹配，确保选中逻辑正确
• inputProps覆盖：在renderInput中手动指定输入框的value为selectedProblemId，确保输入框始终显示当前选中的ID
• 初始化匹配：通过useEffect根据初始的lead.problem_id找到对应的选项对象，完成初始选中状态的正确设置

修改后，输入框的value会显示选中选项的ID（如"1"），下拉列表依然展示对应的标签文本（如"Need a Doctor"），同时状态保存和选中逻辑都能正常运行。

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