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

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

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

解决方法

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

所以你可以直接使用这个 minAssets 作为来自 minAssets 的 prop value 的值，例如：

NumberFormat