1. 程式人生 > >通用元件---輸入框禁用特殊字元,限定長度

通用元件---輸入框禁用特殊字元,限定長度

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;