reactjs - 在 React 中对数字输入使用 toFloat 和 setState

Question

我有一个数字输入字段，可以在用户键入时通过状态设置新值。这很好用。但是，如果我向其中添加小数(toFixed)，则仅输入一位数字后光标将跳转到输入的末尾。例如，当我删除现有内容并输入其他内容时，就会发生这种情况。如果我在第一个数字和小数点之间添加一个数字，则光标不会跳转。有没有人遇到过这种情况，解决方案是什么？

fiddle 显示问题:https://jsfiddle.net/Inverness/k04yvq1u/

constructor() {
    super()

    this.state = {
      number: 1
    }

    this.handleInputChange = this.handleInputChange.bind(this)
  }

  handleInputChange(event) {
    console.log(event.target.value)
    this.setState({
      number: event.target.value
    })
  }

  render() {
    return (
      <div>
        <input
          type="number"
          value={ parseFloat(this.state.number).toFixed(2) }
          onChange={ this.handleInputChange }
          />
      </div>
    )
  }

Answer 1

我已经成功地使用 onBlur 事件处理程序在用户完成输入后将输入字段的格式简单地设置为您需要的方式。

在表单字段标签中添加一些信息，表明输入将限制为 2 个小数位，这应该有助于缓解更改用户提供的值时出现的任何用户体验问题。

 constructor() {
    super()

    this.state = {
      number: 1
    }

    this.handleInputChange = this.handleInputChange.bind(this)
    this.formatInput = this.formatInput.bind(this)
  }

  handleInputChange(event) {
    console.log(event.target.value)
    this.setState({
      number: event.target.value
    })
  }

  formatInput() {
    const num = this.state.number
    this.setState({
        number: parseFloat(num).toFixed(2)
    })
  }

  render() {
    return (
      <div>
        <input
          type="number"
          value={ this.state.number }
          onChange={ this.handleInputChange }
          onBlur={ this.formatInput }
          />
      </div>
    )
 }

JSFiddle