举个例子,页面上三个字段:用户名,邮箱,电话,都是放在state中的,因此对应有三个onChange方法:
三个字段的onChange方法如下:
handleNickName = (e) => {
this.setState({ nickName: e.target.value });
}
handleEmail = (e) => {
this.setState({ email: e.target.value });
}
handlePhone = (e) => {
this.setState({ phone: e.target.value });
}
这种写法特别繁琐,每个字段需要加一个方法,程序猿嘛,最喜欢的就是效率(偷懒)这种写法显然不够轻松,因此写了一个公用的方法:
// 改变组件内的一个字段值
// replaceSpace是否删除所有空格,包含中间的
// intNumber是否是正整数
export const changeOneState = function(e,name, replaceSpace = false, intNumber = false){
//console.log('e', e);
if(e){
let value = undefined;
if (e.target){
const {value: targetV} = e.target
value = targetV;
}else{
value = e;
}
value = replaceSpace ? value.replaceAll(" ", "").replaceAll(" ", "") : value;
value = intNumber ? parseInt(value) > 0 ? parseInt(value): undefined : value;
this.setState({
[name]: value
})
}else{
this.setState({
[name]: undefined
})
}
}
使用方法如下:
首先在类的构造方法中绑定一下:
然后直接使用:
是不是舒服多了呢,需要其他功能,可以自己进行改造。
以上,收工!