如何屏蔽 Material-ui FilledInput

Question

我正在尝试使用此包屏蔽 FilledInput Material-ui 组件以显示为货币：https://www.npmjs.com/package/react-currency-format

我尝试了许多不同的方法，但没有一个是正确的。我创建了一个带有问题的代码框：https://codesandbox.io/s/fancy-silence-vjkxq

现在我正在以这种方式实现：

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}
    />

  )
}

代码工作正常，它更新了数字并应用了material-ui 组件，但是掩码不起作用。

提前致谢

Answer 1

这样的？

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