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

Question

enter image description here

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

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

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

  return (
    <form className={classes.root} noValidate autoComplete="off">
      {console.log(currency)}
      <div>
        <TextField
          id="standard-select-currency"
          select
          label="Select"
          value={currency}
          onChange={handleChange}
          helperText="Please select your currency"
        >
          {currencies.map(option => (
            <MenuItem key={option.value} value={option}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
      </div>
    </form>
  );
}

我无法在“选择”中设置“对象”值。如果没有问题，但是我需要在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>