Reactjs 材质UI TexField选择-展开时显示不同

例如，

TextField

折叠时，我如何在

MenuItem

中显示

01

，

01-这是在物料UI的TextField选择组件上展开的第一个元素

。

您可以控制它，并根据打开状态更改菜单内容，如下所示：

<Select
  open={open}
  onClose={handleClose}
  onOpen={handleOpen}
  value={selectedItem}
  onChange={handleChange}
  inputProps={{
    name: 'selectedItem',
  }}
  >
  <MenuItem value={0}>{open? 1 - this is first element : 01}</MenuItem>
  <MenuItem value={1}>{open? 2 - this is second element : 02}</MenuItem>
  <MenuItem value={2}>{open? 3 - this is third element : 03}</MenuItem>   
</Select>

{open？1-这是第一个元素：01}
{open？2-这是第二个元素：02}
{open？3-这是第三个元素：03}

尽管Domino987回答中的方法可行，但Material UI为此提供了on

Select

。如果在

renderValue

prop中提供函数，则该函数将以所选值作为参数提供，然后该函数返回的内容将显示在折叠视图中。下面是一个基于

TextField

demo之一的示例。在我的示例中，只有货币符号显示在收拢视图中，但在展开视图中，它显示符号，后跟括号中货币的文本缩写

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>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/TextField”导入TextField；
const useStyles=makeStyles（主题=>({
容器：{
显示：“flex”，
柔性包装：“包装”
},
文本字段：{
边缘左侧：主题。间距（1），
边缘光：主题。间距（1），
宽度：200
},
密集的：{
玛金托普：19
},
菜单：{
宽度：200
}
}));
常量货币=[
{
价值：“美元”，
标签：“$”
},
{
价值：“欧元”，
标签：€“
},
{
值：“BTC”，
标签：“฿”
},
{
价值：“日元”，
标签：“%”
}
];
导出默认函数TextFields（）{
const classes=useStyles（）；
const[values，setValues]=React.useState({
货币：货币[0]
});
const handleChange=name=>event=>{
setValues（{…值，[名称]：event.target.value}）；
};
返回(
option.label
}}
helperText=“请选择您的货币”
margin=“正常”
>
{currences.map（选项=>(
{option.label}（{option.value}）
))}
);
}

---

请添加更多代码，或者如果您尝试了某项功能，请至少添加您遇到的问题。