如何使用在 material-ui 的输入文本字段中输入的值来增加常量值

Question

我已经使用 material-ui 的 Input 组件创建了一个字段：

<Input
  placeholder="0.00"
  value={rate}
  onChange={event => {
    this.setState({
      `obj.rate`,
      event.target.value 
    });
  }}
/>

所以，每当我在此字段中输入费率时，

• 1) 应该自动在末尾附加“.00”（例如：我输入71，应该显示71.00）

• 2) 如果我输入以点 (.) 开头的值，则应在点之后输入数字，并且最多可以输入 2 位数字。 （例如：我输入 .2 ===> 应该显示 0.20，如果我输入 .34 ====> 0.34）

请帮我解决这个问题。

提前致谢！

Answer 1

我建议您像计算器一样思考。在字段中，如果您尝试对其进行格式化。不要让您的用户输入点数。将数字与其他字符混合起来很复杂。

让我们试试面具。请查看此代码框：https://codesandbox.io/s/inspiring-paper-0ybrz

基本上，我们将定义一个函数来格式化用户在字段中输入或过去的任何内容。

export function decimalChangeHandler(event) {
  event.target.value = formatDecimal(event.target.value);
}

export function formatDecimal(value) {
  if (typeof value === "undefined") return;
  value = value.toString();
  value = value.replace(/\D/g, ""); // only numbers
  value = value.replace(/(\d{1})(\d{14})$/, "$1,$2");
  value = value.replace(/(\d{1})(\d{11})$/, "$1,$2"); // for 11 digits
  value = value.replace(/(\d{1})(\d{8})$/, "$1,$2"); // for 8 digits
  value = value.replace(/(\d{1})(\d{5})$/, "$1,$2"); // for 5 digits
  value = value.replace(/(\d{1})(\d{1,2})$/, "$1.$2"); // put 2 digits
  return value; // return the value
}

现在我们将在字段发生变化时调用这个函数：

export default function App() {
  const [value, setValue] = useState(null);
  const classes = useStyles();

  const handleChangeValue = event => {
    setValue(decimalChangeHandler(event));
  };

  return (
    <div className="App">
      <h1>Mask Example</h1>

      <form className={classes.root} noValidate autoComplete="off">
        <TextField
          label="Value"
          value={value}
          placeholder="0.00"
          onChange={handleChangeValue}
          InputLabelProps={{
            shrink: true
          }}
        />
      </form>
    </div>
  );
}