如何让 MUI 的 Autocomplete 显示 props.options 中匹配值的标签？

Question

我有一个多语言网站，其中某些自动完成的选项数组需要翻译其项目标签，这很容易完成。

但是，更新存储在别处的当前选择值会比较困难。由于 Autocomplete 使用 value prop 中的标签而不是在选项中使用相同 ID 的项目，因此它最终如下所示：

const vehicles = [
  { id: 1, label: "Car" },
  { id: 2, label: "Bus" }
];

const currentVehicleValue = {
  id: 2,
  label: "Ônibus"
};

export default function ComboBox() {
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={vehicles}
      value={currentVehicleValue}
      renderInput={(params) => <TextField {...params} label="Vehicle" />}
    />
  );
}

有没有办法告诉自动完成使用选项属性内的标签而不是值内的标签

demo

编辑： 我的意思是在我不输入任何内容时显示选项中的标签。比如，语言改变了，选项被翻译了，但 currentValue 没有，所以只要我不输入任何内容，让自动完成使用选项中匹配项的标签会很好。

Answer 1

澄清后编辑

您可以通过调整接收到的 props 来更改 <TextField/> 的呈现方式。

在下面的示例中，我通过 id 找到 currentVehicle 并将 inputProps.value 更改为车辆标签。

此外，为确保 MUI 在选项中正确找到 currentValue，您将需要使用 isOptionEqualToValue 来比较选项 ID 而不是严格相等

const vehicles = [
  { id: 1, label: "Car" },
  { id: 2, label: "Bus" }
];

const currentVehicleValue = {
  id: 2,
  label: "Ônibus"
};

function compareValueToOption(option, value) {
  return option.id === value.id;
}

function ComboBox() {
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={vehicles}
      value={currentVehicleValue}
      renderInput={ComboBoxInput}
      isOptionEqualToValue={compareValueToOption}
    />
  );
}

function ComboBoxInput(props) {
  const currentVehicle = vehicles.find(
    (vehicle) => vehicle.id === currentVehicleValue.id
  );
  props.inputProps.value = currentVehicle.label;

  return <TextField {...props} label="Vehicle" />;
}

这是一个working demo

如何让 MUI 的 Autocomplete 显示 props.options 中匹配值的标签？

How to make MUI's Autocomplete display the label from the matching value in props.options?

reactjs

material-ui

澄清后编辑