Material-UI TexField Select - 展开时显示不同

Question

例如，我将如何在 Material-UI 的 TextField 选择组件上显示01何时MenuItem折叠TextField以及01 - this is first element何时展开？

Answer 1

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

\n\n

import React from "react";\nimport { makeStyles } from "@material-ui/core/styles";\nimport MenuItem from "@material-ui/core/MenuItem";\nimport TextField from "@material-ui/core/TextField";\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: "flex",\n    flexWrap: "wrap"\n  },\n  textField: {\n    marginLeft: theme.spacing(1),\n    marginRight: theme.spacing(1),\n    width: 200\n  },\n  dense: {\n    marginTop: 19\n  },\n  menu: {\n    width: 200\n  }\n}));\n\nconst currencies = [\n  {\n    value: "USD",\n    label: "$"\n  },\n  {\n    value: "EUR",\n    label: "\xe2\x82\xac"\n  },\n  {\n    value: "BTC",\n    label: "\xe0\xb8\xbf"\n  },\n  {\n    value: "JPY",\n    label: "\xc2\xa5"\n  }\n];\n\nexport default function TextFields() {\n  const classes = useStyles();\n  const [values, setValues] = React.useState({\n    currency: currencies[0]\n  });\n\n  const handleChange = name => event => {\n    setValues({ ...values, [name]: event.target.value });\n  };\n\n  return (\n    <form className={classes.container} noValidate autoComplete="off">\n      <TextField\n        id="standard-select-currency"\n        select\n        label="Select"\n        className={classes.textField}\n        value={values.currency}\n        onChange={handleChange("currency")}\n        SelectProps={{\n          MenuProps: {\n            className: classes.menu\n          },\n          renderValue: option => option.label\n        }}\n        helperText="Please select your currency"\n        margin="normal"\n      >\n        {currencies.map(option => (\n          <MenuItem key={option.value} value={option}>\n            {option.label} ({option.value})\n          </MenuItem>\n        ))}\n      </TextField>\n    </form>\n  );\n}\n

\n\n

\n