Javascript 如何屏蔽材质ui FilledInput

我试图使用此软件包将

填充的输入

材质ui组件屏蔽为货币：

我尝试了许多不同的方法，但没有一种是正确的。我创建了一个带有以下问题的代码沙盒：

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

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

  )
}

函数量（{handleChange，values，t}）{
返回(
{t（“发送”）}
);
}
导出默认函数ExchangeRateProvider（）{
返回(
)
}

代码工作正常，它会更新数字，并应用

材质ui

组件，但遮罩不起作用

提前谢谢诸如此类的事

CODESANDBOX

函数应用程序（）{
const[value，setValue]=useState（“0”）；
const handleChange=事件=>{
const{value}=event.target；
设置值（值）；
};
返回(
);
}

您看过文档中的示例了吗？相关答复:

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