如何在物料UI的输入装饰中单击文本或图标时访问SelectField选项

Question

我使用了带有“选择”属性的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>
  );
   }

Answer 1

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

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

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