Reactjs 延迟格式化输入

我正试图找到一种方法来制作一个带小数的可编辑数字

要求： 我希望其他组件可以读取该值。因此，我将其存储在父状态。
该值可以由获取的值更新。当前，父组件中的多个变量会发生这种情况。
只要输入仅显示x个位置，实际值是否有更多位置并不重要

我在转换为固定值时遇到了一个问题——特别是在Chrome上，Chrome恰好是我选择的浏览器。我写了一个密码笔：

只有C使用固定值。它作为“位置”存储在父状态中。当试图编辑C时，它会立即将其转换为固定值，从而移动光标并破坏输入。退格也没有按预期工作。我已经尝试过取消对更改的公告，但没有效果-react在此期间不会显示更改，第二个数字在最终更新时会被弄乱。我曾尝试使用本地状态，但这会干扰外部获取，从而向下传播值，我认为还存在其他问题。我只想强制执行小数点，但不是立即执行。有人应该能够键入1.25或退格，并键入一个新的数字，与它做转换像一秒钟后

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputs: {
        a: { val: 0 },
        b: { val: 0 },
        c: { val: 1.5, places: 2 },
        d: { val: 0 },
        e: { val: 0 },
        f: { val: 0 }
      }
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(value) {
    const update = newVals => {
      return state => {
        let nv = {};
        for (let [key, val] of Object.entries(newVals)) {
          nv = { ...nv, [key]: Object.assign(state.inputs[key], val) };
        }
        const ni = Object.assign(state.inputs, nv);
        return { inputs: ni };
      };
    };
    //-----
    this.setState(update(value));
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>Calc</h1>
        </header>
        <InputArea
          inputs={this.state.inputs}
          onInputChange={this.handleInputChange}
        />
      </div>
    );
  }
}

class InputArea extends React.Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(value) {
    this.props.onInputChange(value);
  }

  render() {
    const inputList = [];

    for (let [key, value] of Object.entries(this.props.inputs)) {
      inputList.push(
        <Variable
          key={key}
          name={key}
          value={value}
          onInputChange={this.handleInputChange}
        />
      );
    }

    return (
      <div className="input">
        <h1>Input</h1>
        <div className="input-area">{inputList}</div>
      </div>
    );
  }
}

class Variable extends React.Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(e) {
    let v = this.props.value;
    v.val = Number(e.target.value);
    this.props.onInputChange({ [this.props.name]: v });
  }

  render() {
    const label = this.props.name;
    let val = this.props.value.val;
    if (this.props.value.places !== undefined)
      val = val.toFixed(this.props.value.places);

    return (
      <div className="flex-row">
        <label>{label}</label>
        <input
          className="variable-input"
          type="number"
          name={label}
          value={val}
          step="any"
          onChange={this.handleInputChange}
        />
      </div>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
投入：{
a:{val:0}，
b:{val:0}，
c:{val:1.5，位置：2}，
d:{val:0}，
e:{val:0}，
f:{val:0}
}
};
this.handleInputChange=this.handleInputChange.bind（this）；
}
handleInputChange（值）{
const update=newVals=>{
返回状态=>{
设nv={}；
for（让[key，val]的Object.entries（newVals））{
nv={…nv[key]：Object.assign（state.inputs[key]，val）}；
}
const ni=Object.assign（state.inputs，nv）；
返回{输入：ni}；
};
};
//-----
此.setState（更新（值））；
}
render（）{
返回(
计算
);
}
}
类InputArea扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleInputChange=this.handleInputChange.bind（this）；
}
handleInputChange（值）{
this.props.onInputChange（值）；
}
render（）{
常量输入列表=[]；
for（让Object.entries的[key，value]（this.props.inputs））{
inputList.push(
);
}
返回(
输入
{inputList}
);
}
}
类变量扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleInputChange=this.handleInputChange.bind（this）；
}
handleInputChange（e）{
设v=this.props.value；
v、 val=数量（即目标值）；
this.props.onInputChange（{[this.props.name]：v}）；
}
render（）{
const label=this.props.name；
设val=this.props.value.val；
if（this.props.value.places！==未定义）
val=val.toFixed（this.props.value.places）；
返回(
{label}
);
}
}

因此用parseFloat包装：

  val = parseFloat(val.toFixed(this.props.value.places));

似乎并没有完全搞错输入，因为用户正在键入，退格基本上是有效的。这就是我现在用的。我仍然想知道是否有办法延迟格式化输入