通用元件---輸入框禁用特殊字元,限定長度
阿新 • • 發佈:2018-12-17
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("[`[email protected]#$^&*()=|{}':;',\\[\\]<>/?~!@#¥……&*()——|{} 【】‘;:”“'。,、?]"); 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;