無法停止反應中輸入標簽中小數點后的尾隨零

Question

我想將輸入限制在小數點后最多 2 位。

class MyComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            stateValue: "",
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(event){
        let value = event.target.value
        let regex = new RegExp("^[0-9]*[.]{0,1}[0-9]{0,2}$")
        if(!regex.test(value)){
            console.log("wrong Input")
            return
        } else {
            this.setState((prevState) => ({
                ...prevState,
                stateValue: value,
            }))
        }
    }

    render(return (<div> <input type="number" onChange={handleChange} /> </div>)
    }
}

上面的代碼片段工作正常，除了我在小數點后使用第三個 position 中的 0 並繼續按 0 的情況。例如

• 按下 12.231 --> 2 位小數后不繼續，即 12.23 在屏幕上可見。
• 按下 12.23000000 --> 12.23000000 出現在屏幕上，即使我在控制台中得到“錯誤輸入”，正如 console.log 為所有小數點后 2 位輸入打印的那樣

Answer 1

您檢查值，但如果輸入的數字太長，您會截斷它，但不會凍結它以更新輸入。 您需要將輸入的值綁定到 state 以便 React 為您將其與 state 同步：

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