如何屏蔽 Material-ui FilledInput

Question

I'm trying to mask a FilledInput Material-ui component to display as currency using this package: https://www.npmjs.com/package/react-currency-format

I tried many different approaches, but none works right. I created a codesandbox with the problem: https://codesandbox.io/s/fancy-silence-vjkxq

Right now I'm implementing this way:

function Amount({ handleChange, values, t }) {
    return (
        <FormControl fullWidth variant="filled">
            <InputLabel htmlFor="amount">{t("Send")}</InputLabel>
            <FilledInput
                name="amount"
                onChange={handleChange}
                value={values.amount}
                startAdornment={
                    <InputAdornment position="start">€</InputAdornment>
                }
            />
        </FormControl>
    );
}

export default function ExchangeRateProvider() {

  return (

    <CurrencyFormat
          customInput={Amount}
          handleChange={handleAmount}
          t={t}
          value={values.amount}
          thousandSeparator={true}
    />

  )
}

The code works fine, it updates the numbers and the material-ui component is applied, however the mask doesn't work.

Thanks in advance

Answer 1

Something like this?

CODESANDBOX HERE

function App() {
  const [value, setValue] = useState("0");

  const handleChange = event => {
    const { value } = event.target;
    setValue(value);
  };

  return (
    <div className="App">
      <CurrencyFormat
        value={value}
        onChange={handleChange}
        displayType={"input"}
        customInput={FilledInput}
        thousandSeparator={true}
        startAdornment={<InputAdornment position="start">€</InputAdornment>}
      />
    </div>
  );
}