问题描述
我在 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>
);
}