通用组件---输入框禁用特殊字符，限定长度

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;