1.封装的组件如下:
import React, { Component } from 'react';
import { Input } from "antd";
class InputE extends Component {
handleChange =(e) =>{
// console.log(e.target.value);
const obj={};
//特殊字符,需要禁用的继续往里添加即可
const pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\]<>/?~!@#¥……&*()——|{} 【】‘;:”“'。,、?]");
if(pattern.test(e.target.value)){
e.target.value='';
return false;
}
obj[e.target.name] = e.target.value;
this.setState({
obj,
});
}
render () {
const {placeholder, maxLength, name, disabled} = this.props;
const {obj} = this.state;
// console.log(obj);
return (
<div>
<Input name={name} placeholder={placeholder} maxLength={maxLength} onChange= {this.handleChange} value={obj ? obj[`${name}`] : ''} disabled={disabled} />
</div>
)
}
}
export default InputE;
2.在其他地方使用(注意,只适用于一般地方的输入框,暂不适合编辑修改类)
name属性,请使用不同值
<InputE name="name" placeholder="请输入" maxLength="20" />
import React, { Component } from 'react'
class componentName extends Component {
render () {
return (
<div>
<InputE name="name1" placeholder="请输入" maxLength="20" />
<InputE name="name2" placeholder="请输入" maxLength="20" />
<InputE name="name3" placeholder="请输入" maxLength="20" />
</div>
)
}
}
export default componentName;