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

Posted 2023-02-15

【中文标题】使用 parseFloat 时，React onChange 吞下了我的小数

【英文标题】：React onChange is swallowing my decimal when using parseFloat

【发布时间】：2017-07-22 09:15:10

【问题描述】：

我有一个简单的 onChange，它接受用户的输入解析它并将状态设置为呈现。这是代码。

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;

我不明白我的小数点在哪里。我知道没有适当的验证来阻止用户输入字母，但这只是一个示例应用程序来测试我遇到的这个问题。当我输入小数点时不会呈现。我哪里错了？

【问题讨论】：

e.target.value 在控制台中显示什么？

解析前还是解析后？

好的，刚试了下就搞定了。当我只有 1. 我在控制台中看到 1. 而不是在屏幕上。当我写 1.2 时，我在控制台和屏幕上看到了 12。

translating between cents and dollars in html input in React的可能重复

【参考方案1】：

问题是 React 的 onChange 的行为不像浏览器的 onChange 它的行为像 onInput 所以每次你输入一个值时它都会被调用。这导致您的 parseFloat 实际上解析 1. 而不是 1.2 并且 1. 的解析值是 1

【参考方案2】：

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

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

因此，一种解决方案是将其作为字符串存储在您的状态中，可能称为inputValue。然后，使用单向数据流，管理该字符串与以数字方式非常明确地考虑它的代码部分之间的转换。从字符串转换为数字是危险的——并非每个字符串都代表一个数字，因此部分代码需要处理验证（并且不会丢失文本输入的跟踪）。正如您已经观察到的那样，从数字转换为字符串是有风险的，因此只有在有充分理由时才应该这样做（例如，服务器正在推送数据在其他地方发生更改的事件，将其换掉)。

【参考方案3】：

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

【讨论】：

parseFloat 不带基本参数。

这是在 React 中完成的。 Google React 受控组件

@Armin 如果你修正了你的答案，我可以取消我的反对票

@nafg 完成了，看起来怎么样？

【参考方案4】：

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

这里的问题是parseFloat，当您输入新的浮点值时，它会从字符串末尾修剪点，并返回您的字符串parseFloat('0.') 值0，因此您会看到您的行为...