无法停止在“响应”中的输入标记中十进制后停止尾随零

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

上面的代码片段可以正常工作，除非我在小数点之后使用0，然后继续按0。例如

screen.

• pressed 12.23000000 ->12.23000000出现在
• 按下的12.231 ->2小数位后，即12.23在屏幕上可见，尽管我在控制台中得到了“错误的输入”，这是console.log在十进制

的2位后打印的。

Answer 1

您可以检查值，但是如果输入的数字太长，就会截断它，但不会因为更新输入而冻结它。您需要将输入的值绑定到状态，以便将其与状态同步：

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