javascript - REACT - 达到小数点后 2 位后防止小数点后输入

Question

我在组件中有一个输入框。如果输入框的值包含超过 2 位小数，我想阻止用户添加任何输入。

例如如果用户输入 10.95 我不想允许他们在此值后写入任何其他内容。他们仍然可以将其更新为 101.95，但它应该防止在最后的小数位后添加任何输入。

到目前为止我的代码如下。

class inputBox extends Component {

    countDecimals(value) {
        if(Math.floor(value) === value) return 0;
        return value.toString().split(".")[1].length || 0;
    }

    updateValue(e) {
        if(this.countDecimals(e.target.value) > 2) {
            //prevent user from inputting into box after the decimal place...
        }
    }

    render() {
       return(
          <input type='text' onChange={this.updateValue} />
        )
   }
}

Answer 1

您可以使用 React 控制组件并将状态绑定(bind)到输入的值属性。然后你的 onChange 事件处理程序将如下所示。

    updateValue(e) {
        this.setState({ value: e.target.value.toString().split(".").map((el,i)=>i?el.split("").slice(0,2).join(""):el).join(".")})
    }

为我工作。