javascript - 如何使用在 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 ===> 如果我输入 .34 ====> 0.34，它应该显示 0.20）

请帮我解决这个问题。

提前致谢！

标签： javascripthtmlnode.jsreactjsmaterial-ui

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