通过在ReactJS中的3个字符后添加小数点，在键入时格式化输入文本

Question

如何在输入React表单组件时格式化数字？我用下面的代码demo here尝试了这个，当我尝试在页面上显示值时它工作正常，但是当我在输入字段上尝试它时，格式化不能正常工作：value={this.state.hello}。

如果不是正确的方法，有没有最好的方法来解决这个问题？

import React from "react";
import { render } from "react-dom";
import Button from "./button";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  insertDecimal = num => (Number(num) / 1000).toFixed(3);

  onchangeHandler = event => {
    let fieldName = event.target.name;
    let fieldVal = event.target.value;
    const formattedVal = this.insertDecimal(fieldVal);
    this.setState({ ...this.state, [fieldName]: formattedVal });
  };

  render() {
    console.log("state : ", this.state);
    return (
      <div>
        <input
          type="number"
          name="hello"
          value={this.state.hello}
          onChange={this.onchangeHandler}
        />
        {this.state.hello}
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Answer 1

您的值格式化将输入除以1,000。当用户输入3时，输出为0.003。当他们输入一个额外的数字时，0.003N的新值再次除以1,000，产生类似0.0000031的东西，你将其缩小到3，产生0.000。