当我们在 Material UI 中单击输入装饰中的文本或图标时如何访问 SelectField 选项答案

【问题标题】：How to access the SelectField options when we click on the text or icon in input adornment in Material UI当我们在 Material UI 中单击输入装饰中的文本或图标时如何访问 SelectField 选项
【发布时间】：2021-04-27 21:53:14
【问题描述】：

我使用了带有“Select”属性的 Material UI TextField 来使其成为 SelectField。我在输入装饰中有文本。单击输入装饰文本时，我需要访问 SelectField 选项。我不明白该怎么做。我在下面提供沙盒链接。谁能帮我这个？谢谢你。

沙盒链接：https://codesandbox.io/s/material-demo-forked-bykj0?file=/demo.tsx

代码：

import React from "react";
import { createStyles, makeStyles, Theme, fade } from "@material- 
  ui/core/styles";
 import {TextField, Typography} from "@material-ui/core";
import { TextValidator } from 'react-material-ui-form-validator';
import InputAdornment from '@material-ui/core/InputAdornment';
import MenuItem from '@material-ui/core/MenuItem';

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

 const useStyles = makeStyles((theme: Theme) =>
 createStyles({
 root: {
 "& > *": {
margin: theme.spacing(1),
width: "25ch"
 }
 }
})
);

 const useStylesReddit = makeStyles((theme: Theme) =>
createStyles({


selectClass: {
minWidth: '20px'
 }

})
 ); 

 export const MovingOutRedditTextField = (TextFieldProps) => {
 const classes = useStylesReddit();
  const { id } = TextFieldProps;
  return (
  <TextField
  id={id}
  InputLabelProps={{
  shrink: true,

  }}

  InputProps={{
   classes,
   disableUnderline: true,
    endAdornment: (
     <InputAdornment position="end">
     <Typography
      color="textSecondary"
      >
      currency
      </Typography>
     </InputAdornment>
    )
    }}
   {...TextFieldProps}
    />
    );
    };

   export default function BasicTextFields() {
   const classes = useStyles();
   const [currency, setCurrency] = React.useState('EUR');

   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
   setCurrency(event.target.value);
   };

    return (


    <MovingOutRedditTextField
   select
   classes={{select:classes.selectClass}}
   required
   style={{width:'400px'}}
   label="Return"
   id="securityDepoistReturn"
   value={currency}

   variant="filled"
   >
  {currencies.map((option) => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
  </MovingOutRedditTextField>
  );
   }

【问题讨论】：

你能按照你期望的样子制作一张图片吗？

标签： reactjs material-ui

【解决方案1】：

这个问题已经存在很长时间了，正在 Github 中讨论。来，看看吧。

https://github.com/mui-org/material-ui/issues/17799

目前似乎没有好的解决方案。此外，您忘记在 TextField 中添加 onChange 方法，因此您无法更改货币。 InputAdornment 如果通常用于输入字段。你最好去github看看，你可能会在那里找到一些解决方案。

【讨论】：