reactjs - Material-UI TextField Select - 展开时显示不同

Question

当 TextField 折叠时，我将如何在 MenuItem 中显示 01 并且 01 - 这是第一个元素 当它在 Material-UI 的 TextField 选择组件上展开时？

Answer 1

尽管 Domino987 的答案中的方法可行，但 Material-UI 提供了 renderValue prop为此，在 Select 上。如果您在 renderValue 属性中提供一个函数，该函数将提供选定的值作为参数，然后函数返回的内容将显示在折叠 View 中。下面是一个基于 TextField 演示之一的示例。在我的示例中，折叠 View 中仅显示货币符号，但在展开 View 中，它显示符号后跟括号中的货币文本缩写。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import MenuItem from "@material-ui/core/MenuItem";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles(theme => ({
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200
  },
  dense: {
    marginTop: 19
  },
  menu: {
    width: 200
  }
}));

const currencies = [
  {
    value: "USD",
    label: "$"
  },
  {
    value: "EUR",
    label: "€"
  },
  {
    value: "BTC",
    label: "฿"
  },
  {
    value: "JPY",
    label: "¥"
  }
];

export default function TextFields() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    currency: currencies[0]
  });

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

  return (
    <form className={classes.container} noValidate autoComplete="off">
      <TextField
        id="standard-select-currency"
        select
        label="Select"
        className={classes.textField}
        value={values.currency}
        onChange={handleChange("currency")}
        SelectProps={{
          MenuProps: {
            className: classes.menu
          },
          renderValue: option => option.label
        }}
        helperText="Please select your currency"
        margin="normal"
      >
        {currencies.map(option => (
          <MenuItem key={option.value} value={option}>
            {option.label} ({option.value})
          </MenuItem>
        ))}
      </TextField>
    </form>
  );
}