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

1

onChange イベントは、キーを押すたびに発生します。これにより、関数が実行され、parseFloat が.数値から削除されます。そのため、1.2 ではなく 12 になるため、parseFloat を使用する前に、最後の文字.が後で追加します。

于 2017-03-02T15:19:25.147 に答える