自定义Select下拉框回车选中后显示[object Object]问题求助

问题描述 #

制作自定义Select下拉框时遇到以下问题：使用map()渲染数组列表时显示正常，但按下回车选中选项后，输入框中显示[object Object]。

相关代码示例 #

处理输入和键盘事件的代码：

const handleChange = (event) => {
  setSelectedOption(event.target.value);
}

const handleKeyDown = (event) => {
  if (event.key === 'ArrowDown') {
    event.preventDefault();
    const nextOption = highlightedOption + 1;
    if (nextOption < statusList.length) {
      setHighlightedOption(nextOption);
    }
  } else if (event.key === 'ArrowUp') {
    event.preventDefault();
    const prevOption = highlightedOption - 1;
    if (prevOption >= 0) {
      setHighlightedOption(prevOption);
    }
  } else if (event.key === 'Enter' && highlightedOption !== -1) {
    setSelectedOption(statusList[highlightedOption]);
    setShowList(false)
  }
}

输入框及列表渲染代码：

<input 
  className={`${classes.input} ${statusIsValid&&selectedOption===''  ? classes.border : ''} ${statusIsValid&&selectedOption===null  ? classes.border : ''}`}
  type="text"
  value={selectedOption}
  onChange={handleChange}
  onKeyDown={handleKeyDown}
  onClick={showListFunc}
  placeholder="Odjel"
  ref={input1Ref}
/>
{showList && <div className={classes.options}>
  {statusList.map((option, index) => (
    <div
      key={Math.random()}
      style={{ backgroundColor: index === highlightedOption ? 'lightgray' : 'white' }}
    >
      {option.naziv}
    </div>
  ))}
</div>}

statusList是包含对象的数组，每个对象结构为{ id: 数字, naziv: 字符串 }。

原因分析 #

问题核心在于：

• 回车选中时，你将整个对象statusList[highlightedOption]赋值给了selectedOption
• 输入框的value属性仅支持字符串类型，当传入对象时，JavaScript会自动将其转换为字符串，结果就是[object Object]

解决方案 #

1. 修改回车选中逻辑，仅传递字符串值 #

将回车时的赋值改为对象的naziv属性（即你要在输入框显示的文本）：

else if (event.key === 'Enter' && highlightedOption !== -1) {
  // 只取对象的naziv属性赋值给selectedOption
  setSelectedOption(statusList[highlightedOption].naziv);
  setShowList(false);
}

2. （可选）维护完整选中对象（如需后续使用） #

如果需要在业务逻辑中使用选中项的完整对象（比如id），可以新增一个状态来存储：

// 初始化状态
const [selectedOption, setSelectedOption] = useState('');
const [selectedOptionObj, setSelectedOptionObj] = useState(null);

// 回车选中时同时更新两个状态
else if (event.key === 'Enter' && highlightedOption !== -1) {
  const targetOption = statusList[highlightedOption];
  setSelectedOption(targetOption.naziv);
  setSelectedOptionObj(targetOption);
  setShowList(false);
}

3. 修复列表key的问题 #

当前用Math.random()作为列表项的key是不规范的，会导致组件频繁重渲染。建议使用每个选项唯一的id作为key：

{statusList.map((option, index) => (
  <div
    key={option.id} // 替换Math.random()为option.id
    style={{ backgroundColor: index === highlightedOption ? 'lightgray' : 'white' }}
  >
    {option.naziv}
  </div>
))}

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