我可以在选择中设置默认对象值吗

Question

const currencies = [
  {
    value: "USD",
    label: "$",
    name: "Dollar"
  },
  {
    value: "EUR",
    label: "€",
    name: "Euro"
  }
];

export default function MultilineTextFields() {
  const [currency, setCurrency] = React.useState({ 
    label: "€", 
    value: "EUR",
    name: "Euro" 
  });

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

  return (
    <form noValidate autoComplete="off">
      {console.log(currency)}
      <div>
        <TextField
          select
          value={currency}
          onChange={handleChange}
        >
          {currencies.map(option => (
            <MenuItem key={option.value} value={option}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
      </div>
    </form>
  );
}

我无法在“选择”中设置“对象”值。如果<MenuItem key={option.value} value={option.value}>没问题，但是我需要在Object中提供一些值以进行输出。我必须value={option}在某些字段中打印{currency.name}。

Answer 1

为包装的“选择”元素/组件提供defaultValue道具，并为“选项”指定非对象值。

<TextField
  id="standard-select-currency"
  select
  label="Select"
  value={currency}
  onChange={handleChange}
  helperText="Please select your currency"
  defaultValue="EUR"
>
  {currencies.map(option => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</TextField>