11

我有一个简单的 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;

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

4

4 回答 4

9

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

于 2017-03-02T15:40:35.597 回答
2

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

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

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

于 2017-03-03T01:19:20.507 回答
1

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

于 2017-03-02T15:19:25.147 回答
0

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

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

于 2017-03-02T15:44:39.853 回答