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

最新推荐文章于 2024-04-19 16:54:33 发布

原创最新推荐文章于 2024-04-19 16:54:33 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

前端框架－react 同时被 2 个专栏收录

11 篇文章

订阅专栏

前端技术

8 篇文章

订阅专栏

本文介绍了一种在React中创建自定义输入框组件的方法，该组件能够限制用户输入特定的特殊字符，并通过状态管理实现了输入值的更新。此外，还展示了如何在其他组件中复用此输入框组件。

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属性，请使用不同值

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;