反應號碼輸入允許輸入如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) })