Question

以下代码示例适用于text输入类型，但允许在使用012输入类型时输入0012或number等输入。

console.log行始终运行并显示正确的值，并且在使用React Developer Tools进行检查时，App状态也是正确的。只是受控输入不是以某种方式被“控制”。

为什么会发生这种情况，以及在React中使用数字输入的推荐方法是什么？

class App extends Component {
  constructor() {
    super()
    this.state = {
      value: '',
    }
  }

  handleChange = e => {
    const value = e.target.value
    const num = parseInt(value, 10)
    console.log(num)
    this.setState({ value: isNaN(num) ? '' : num })
  }

  render() {
    return (
      <div className="App">
        <input type="number" value={this.state.value} onChange={this.handleChange} />
      </div>
    )
  }
}

Answer 1

因此，您将受控输入的模型绑定到您所在状态的数字，该数字在012和12之间没有更改 - 因此它保持不变。

相反，你可以做

render() {
  const value = this.state.value.toString()
  return <input type="number" value={value} onChange={this.handleChange} />
}

字符串实际上会有所不同，它会正确地重新渲染，剥离前导0.或者，你可以setState({ value: String(num) })

反应数字输入允许输入像012

1 个答案: