当使用parseFloat时,React onChange吞噬了我的小数

Question

我有一个简单的onChange,它接受用户的输入pareses并设置要渲染的状态.这是代码.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      random: {
        foo: 0
      }
    }
  }

  onChange(e) {
    let random = this.state.random;
    random[e.target.name] = parseFloat(e.target.value);
    this.setState({random});
  }

  render() {
    return (
      <div className="App">
        <input onChange={this.onChange.bind(this)} type="text" name="foo" value={this.state.random.foo} />
      </div>
    );
  }
}

export default App;

我不明白的是我的小数点在哪里.我知道没有任何验证可以阻止用户输入字母,但这只是一个示例应用来测试我遇到的这个问题.当我输入小数点时,不会被渲染.我哪里错了？

Answer 1

问题是React的onChange行为与浏览器不同,onChange它表现得像onInput每次键入值时都会调用它.这导致您parseFloat实际解析1.而不是1.2和解析的值1.is1