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.的解析值为1

Answer 2

onChange事件会在您按下某个键时发生，这会导致该函数运行并且parseFloat从您的号码中删除.，这就是为什么您最终有12而不是1.2，所以之前使用parseFloat，您需要检查最后一个字符是否为.并在之后添加回来。

Answer 3

将您的默认状态更改为nil - 您将能够编辑此值（这不是解决方案，这是线索）。

此处的问题是foo: 1.11，当您键入新的浮点值时，它会修剪字符串末尾的点，并返回字符串parseFloat值parseFloat('0.')，因此您会看到自己的行为。 ..

Answer 4

正如其他人所说，问题是数字类型没有足够的信息来保存输入的状态，所以当1.进行往返时它会丢失.。

换句话说，输入是用于编辑字符串的小部件，并且您的状态不包含足够的信息来正确地重新创建该字符串，而小数点则会丢失。

因此，一种解决方案是将其存储为您所在州的字符串，可能称为inputValue。然后，使用单向数据流，管理该字符串与在数字上非常明确地考虑它的代码部分之间的转换。从字符串转换为数字是危险的 - 并非每个字符串都代表一个数字，因此部分代码需要处理验证（而不是丢失对文本输入的跟踪）。从数字到字符串的转换是有风险的，正如您已经观察到的那样，所以只有在有充分理由的情况下才能进行转换（例如，服务器正在推送数据在其他地方发生变化的事件，交换它出来了。

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

4 个答案: