反应号码输入允许输入如012

Question

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

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) })