无法在 TextField Material UI 中输入浮点值

Question

网上很多建议都说使用

inputProps

和

step

属性，但问题是它会被弃用。

我尝试在

step

之外使用

inputProps

属性，但它根本不起作用。

如果我输入1.2，它会提示输入1或2。

<TextField
  fullWidth
  required
  id="amount-field"
  margin="dense"
  label="Amount ($)"
  type="number"
  step={0.01} // step="any" doesn't work as well
/>

我希望能够毫无问题地输入 1.2 或 2.50 等浮点值，但它不起作用。

Answer 1

Material UI 建议不要使用

type='number'

（您可以在这里查看他们的原因）。 MUI 存储库中还有一个关于向 MUI 添加数字输入的 github 问题，该问题自 2020 年 1 月 9 日以来一直在发生（添加数字输入似乎已经有 4 年多的时间了😂）。我建议使用像

react-number-format

这样的库，它允许您传递自定义输入（他们甚至在

他们的示例中使用 MUI 的 

TextField）。

这里有一个示例，介绍如何结合

react-number-format

 和 MUI 的 

<TextField />

 创建可重复使用的数字输入：

import { NumericFormat, NumericFormatProps } from 'react-number-format';
import { TextField, TextFieldProps } from '@mui/material';

export type NumberInputProps = NumericFormatProps<TextFieldProps>;

export default function NumberInput(props: NumberInputProps) {
  return <NumericFormat customInput={TextField} {...props} />;
}

然后你可以像这样使用它：

function Example() {
  const [value, setValue] = useState(12345);

  return (
    <NumberInput
      // NumericFormat props
      value={value}
      onValueChange={({ floatValue }) => floatValue && setValue(floatValue)}
      // TextField props
      fullWidth
      required
      id="amount-field"
      margin="dense"
      label="Amount ($)"
    />
  );
}

这是一个

工作示例。