为 html 选择选项显示与标签不同的文本

Question

抱歉，如果标题令人困惑，但基本上我有一个反应组件，它呈现一个带有一堆

select

的

options

下拉列表。我想正常在下拉列表中显示

options

，但是一旦选择，我希望所选值与其标签相比是其他值。

通过创建选项的名为

options

的数组进行映射时更容易理解：

<select value={value}>
    {options.map(({ name, value }, i) => (
        <option key={i} value={value}>
            {name}
        </option>
    ))}
</select>

这里我希望下拉列表中的选项与名称一起显示，但是一旦选择，它应该显示为不同的值。如果这是有道理的话。我见过一些类似的问题，但没有涉及react而是使用标准html，所以所有的js都是jquery。

Answer 1

您可以通过使用受控组件并与所选值分开管理显示值来实现此目的。这是一个例子：

import React, { useState } from 'react';

const Dropdown = ({ options }) => {
  const [selectedValue, setSelectedValue] = useState('');
  const [displayValue, setDisplayValue] = useState('');

  const handleChange = (event) => {
    const selectedOption = options.find(option => option.value === event.target.value);
    setSelectedValue(event.target.value);
    setDisplayValue(selectedOption ? selectedOption.value : '');
  };

  return (
    <select value={selectedValue} onChange={handleChange}>
      {options.map(({ name, value }, i) => (
        <option key={i} value={value}>
          {name}
        </option>
      ))}
    </select>
    <div>Selected: {displayValue}</div>
  );
};

export default Dropdown;

这样，下拉菜单会在选项中显示

name

，但选择后，它会在下拉菜单下方的

value

中显示

div

。