reactjs 控制输入框最多只能输入两位小数

1，首先要知道控制两位小数的正则表达式

const reg = /^(-)*(\d+)\.(\d\d).*$/;

value.replace(reg, "$1$2.$3")

2，我用的是antd from 组件

 

<Item colon={false} label={<span className="wo-form-item-label">质检评分：</span>} style={{ width: "185px", marginRight: 0 }}>

{getFieldDecorator("qualityScoreStart")(

<Input type="number" name="qualityScoreStart" style={{ width: 75, textAlign: "center" }} placeholder="0.00" onChange={this.controlpoint}/>

)}

</Item>

以上是代码和实现的效果，

因为我用的是form的组件所以我改变input 的值用的是this.props.form.setFieldsValue

第一次尝试实现： 在onchange 的时候监听input

controlpoint = e => {

const reg = /^(-)*(\d+)\.(\d\d).*$/;

this.props.form.setFieldsValue({

qualityScoreStart: e.target.value.replace(reg, "$1$2.$3")

});

}

但是没有效果，qualityScoreStart: e.target.value.replace(reg, "$1$2.$3") 这样写好像不行，增加了一句e.target.value = e.target.value.replace(reg, "$1$2.$3");这样就可以了。我也不知道为啥

controlpoint = e => {

const reg = /^(-)*(\d+)\.(\d\d).*$/;

e.target.value = e.target.value.replace(reg, "$1$2.$3");

this.props.form.setFieldsValue({

qualityScoreStart: e.target.value

});

}

一个页面中好几个这样的input ，也不能写好几遍这个函数呀，于是我就给每个input 增加了个name 用于区分

代码如下：

controlpoint = e => {

const reg = /^(-)*(\d+)\.(\d\d).*$/;

e.target.value = e.target.value.replace(reg, "$1$2.$3");

if (e.target.name === "qualityScoreStart") {

this.props.form.setFieldsValue({

qualityScoreStart: e.target.value

});

} else if (e.target.name === "qualityScoreEnd") {

this.props.form.setFieldsValue({

qualityScoreEnd: e.target.value

});

} else if (e.target.name === "reQualityScoreStart") {

this.props.form.setFieldsValue({

reQualityScoreStart: e.target.value

});

} else if (e.target.name === "reQualityScoreEnd") {

this.props.form.setFieldsValue({

reQualityScoreEnd: e.target.value

});

}

};