使用 react-number-format：一次不能输入多个符号

Question

我在我的 TextField (material-ui) 中使用 react-number-format 包。它有奇怪的行为，不允许我在 TextField 中同时放置多个符号。当我在第一次单击后开始输入时，字段不再聚焦。我在其他项目中使用过同样的东西，它工作正常，但在这里我看不出问题出在哪里。这是沙盒：

https://codesandbox.io/s/little-cherry-ubcjv?file=/src/App.js

import React,{useState} from 'react'
import { TextField} from "@material-ui/core";
import NumberFormat from "react-number-format";

export default function App() {
  const [minAssets, setMinAssets] = useState();

const NumberFormatCustom = (props) => {
    const { inputRef, onChange, ...other } = props;
    return (
      <NumberFormat
        {...other}
        getInputRef={inputRef}
        onValueChange={(values) => {
          onChange({
            target: {
              name: props.name,
              value: values.value,
            },
          });
        }}
        thousandSeparator
        isNumericString
        prefix="$"
      />
    );
  };
  return (
    <div className="App">
        <TextField
          label="Min Assets"
          value={minAssets}
          onChange={(e) => setMinAssets(e.target.value)}
          name="minAssets"
          variant="outlined"
          id="Minimum-Income-filter"
          InputProps={{
            inputComponent: NumberFormatCustom,
          }}
        />
    </div>
  );
}

Answer 1

在你的情况下，你并不需要 NumberFormat 组件上的 onValueChange 道具，因为你已经在 TextField 组件上有一个 onChange 来更新minAssets 状态。

所以你可以直接使用这个 minAssets 作为 NumberFormat 的属性 value 的值，比如：

return (
  <NumberFormat
    {...other}
    value={minAssets}
    getInputRef={inputRef}
    thousandSeparator
    isNumericString
    prefix="$"
  />
);

使用 react-number-format：一次不能输入多个符号

Using react-number-format: cannot type more than one symbol at once

javascript

uitextfield

reactjs

react-number-format