使用react-number-format搭配Material-UI TextField无法连续输入字符问题

问题原因 #

你将自定义输入组件NumberFormatCustom声明在了App组件内部，每次输入触发minAssets状态更新时，App组件都会重渲染，此时NumberFormatCustom会被视为全新的组件类型，React会卸载旧的输入框DOM节点、挂载新的节点，就会出现输入一次后输入框失去焦点的问题。

修复方案 #

把NumberFormatCustom组件移到App组件外部定义即可，修改后完整代码如下：

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

// 移到App组件外部定义
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="$"
    />
  );
};

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

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

内容的提问来源于stack exchange，提问作者Borislav Stefanov