自动将小数点添加到 mui 文本字段中的值答案

【问题标题】：Adding a decimal point automatically to a value in mui textfield自动将小数点添加到 mui 文本字段中的值
【发布时间】：2022-12-16 16:14:51
【问题描述】：

我在我的 reactjs 应用程序中使用 @material-ui TextField，在一个输入字段中，当用户输入一定数量的数字时，我需要为其值添加一个小数点。例如，

如图所示，当用户输入 3 和 7 时，我需要添加小数点 (.) 使其类似于 37。这允许他输入它的十进制值 (1)。

我试图在 react-number-format 包中使用 PatternFormat 提出一个解决方案，如下所示。

   <PatternFormat
    {...other}
    thousandSeparator
    format={format}
    getInputRef={inputRef}
    onValueChange={(values) => {
      data.weight = parseFloat(values.formattedValue).toFixed(1);
      onTextChange({
        target: {
          name,
          value: parseFloat(values.formattedValue).toFixed(1),
        },
      });
    }}
    // isNumericString
  />

但是在该用户必须输入两位数字之前添加十进制值。例如，这里用户可以输入37.1，但不能输入5.1。

【问题讨论】：

标签： reactjs material-ui react-number-format

【解决方案1】：

添加条件以检查号码长度

value: values.formattedValue.length > 1? parseFloat(values.formattedValue).toFixed(1): values.formattedValue ,

【讨论】：