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({
render () {
const {placeholder, maxLength, name, disabled} = this.props;
const {obj} = this.state;
// console.log(obj);
return (
export default InputE;
2.在其他地方使用（注意，只适用于一般地方的输入框，暂不适合编辑修改类）
name属性，请使用不同值
<InputE name="name" placeholder="请输入" maxLength="20" />
import React, { Component } from 'react'
class componentName extends Component {
render () {
return (
<InputE name="name1" placeholder="请输入" maxLength="20" />
<InputE name="name2" placeholder="请输入" maxLength="20" />
<InputE name="name3" placeholder="请输入" maxLength="20" />
export default componentName;
一般来说，react上我们都会用change事件去处理input的输入，但这样就导致一个问题，在输入中文的时候，我们还没输入完成就会触发change事件，这样显然不是理想状况。
那么，怎么解决这个问题呢？首先，你需要了解3个事件，compositionstart，compositionupdate和compositionend。什么意思呢？
compos...
列表(List)， 键(Key)
回顾一下在javascript中如何转换列表：在数组中使用map()函数对numbers数组中的每个元素依次执操作
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
c......
今天想总结几个很有用的html标签，开发中经常用到，不熟悉的人可能还真不太清楚，分别是：
readonly、disabled、autocomplete
readonly表示此域的值不可修改，仅可与 type="text" 配合使用，可复制，可选择,可以接收焦点，后台会接收到传值.
disabled表示禁用input元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值
const emojiReg=/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/g；
//特殊字符
const scReg=/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/im;
利用input的value和onChange属性，
if (!emojiReg
查阅后发现 type = number 在手机浏览器端的支持率很低。表里显示IOS 13.4支持了这个属性，但实测发现虽然弹起了数字键盘，但是仍然可以输入特殊字符。
最奇葩的是当你在支持这个属性的web浏览器端使用 type = number 时，输入 + 、- 、e时，是不会触发onChange的.
以下会涉及到的技术点：react mobx compositionstart compositionupdate compositionend问题描述在使用 input 时，通常会对输入的内容做校验，校验的方式无非两种：允许用户输入，并且做错误提示；不允许用户输入正则或者函数匹配到的字符。现有如下需求：“仅允许输入英文、数字和汉字，不允许输入其他特殊字符和符号”。显然这种场景需要使用第二种校验方式...
React学习笔记2（应用篇）零 l 说明一 l React 应用（基于React 脚手架）（一）React 脚手架 create-react-app1、脚手架是什么2、create-react-app快速创建项目3、create-react-app创建的脚手架的项目结构
零 l 说明
本文参考教程：[尚硅谷2021版React技术全家桶]
本文上接：[React学习笔记1（概念篇）]
一 l React 应用（基于React 脚手架）
（一）Reac
