背景:react + antd
目标:通过正则来控制input只能输入某类字符:
state={
name:""
}
handleNameChange = v => {
this.setState({ name: v.target.value });//*1:input的value发生改变时,将state中的name设置为改变后的值
};
- 定义一个过滤方法,以只允许输入中英文为例:
filterName = (value = "") => {
return value.trim().replace(/[^a-zA-Z\u4e00-\u9fa5]/g,"");
};
- 在input元素中控制value:
<Input
maxLength={10} //长度限制可以通过maxLength属性简单的实现
placeholder="请输入"
value={this.filterName(this.state.name).trim()}//*2 将value指定为state中的name
onChange={this.handleNameChange}
/>
题外话:通过* 1 和 * 2 ,就实现了react中 input 值 的双向绑定
一个值得注意的问题:由于只允许输入中文和英文,所以空格也是不被允许输入的,我们的输入法在输入连续的中文时,将词语中间自动识别为空格,所以导致不能输入连续的中文,只能一个字一个字的输入。关于这个问题的解决办法:
filterName = (value = "") => {
return value.trim().replace(/[^a-zA-Z\u4e00-\u9fa5/s]/g,"");
};
在正则匹配后面加了一个/s,代价是允许输入空格。如果需要这么做,可以考虑在后续提交表单时过滤掉所有的空格。
斟酌了一下还是只允许输入单字更方便,主要看产品能否接受。