无法停止反应中输入标签中小数点后的尾随零答案

【问题标题】：Unable to stop trailing zeroes after decimal in input tag in react无法停止反应中输入标签中小数点后的尾随零
【发布时间】：2020-06-23 13:13:28
【问题描述】：

我想将输入限制为小数点后 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>)
    }
}

上面的代码 sn-p 工作正常，除了我在小数点后第三位使用 0 并继续按 0 的情况。例如

按 12.231 --> 2 位小数后不继续，即 12.23 在屏幕上可见。
按下 12.23000000 -->12.23000000 出现在屏幕上，即使我在控制台中得到“错误输入”，正如 console.log 为所有小数点后 2 位输入打印的那样

【问题讨论】：

您是否尝试在 input 元素中添加十进制规则？ stackoverflow.com/a/22361070/8606992
是的，它对我不起作用，我只是希望尾随 0 停止出现在屏幕上，因为我的状态正在更新，但我无法停止屏幕上的那些 0

标签： javascript regex reactjs input

【解决方案1】：

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

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

【讨论】：