【复习】如何在Vue和React中实现表单值校验和搜索功能。下面总结一下我在使用vue和react实现这些功能时踩过的坑。表单验证和搜索功能的实现Formverification表单验证需求很常见，比如：匹配某些规则（企业税号格式验证、phonenumber（手机号码）验证、身份证验证...）、限制条件关于内容长度，输入字符类型的限制等。Vue中的实现：使用输入事件处理输入框的值。在Vue中，处理中文时要特别注意input和keyup事件的选择，选择input事件。陷阱：在输入输入时触发事件时，input事件和keyup事件在性能上没有区别。值改变时触发input，松开键盘时触发keyup。当鼠标离开输入中文未选中内容时，不会触发keyup事件，但会触发input事件。下面的例子限制输入框的字符数不超过32个：限制字符数的代码（中文2个，英文1个）：limitLength(e){constinput=e.targetconstvalue=input.valueconstsplit=value.split('')constmap=split.map((s,i)=>{returnvalue.charCodeAt(i)>=0&&value.charCodeAt(i)<=128?1:2})letn=0constcharLength=map.length>0&&map.reduce((accumulator,currentValue,index)=>{constcount=accumulator+currentValueif(count===31||count===32){n=index}if(count>32){this.name=split.slice(0,n+1).join('')//this.$emit("setUserName",split.slice(0,n+1).join(''));}返回计数})},keyup事件效果鼠标离开时不触发回调函数（输入中文拼音时字符数超过32仍可显示）input事件效果鼠标离开时触发回调函数。Vue中实现带有校经验的FormInput输入框组件：正面说明:在使用vue用来实现回车换行等功能的keyup事件，体验更好this.content+=`\n`letel=this.$el.querySelector('.input-textarea')el.scrollTop=el.scrollHeight-el.clientHeight}}，校验和搜索并存React中的实现：需要封装原生的compositionstart/compositionend事件React中的输入表单是没有输入事件的，那么如何实现像Vue中的输入事件一样处理中文输入的效果呢？FormInput业务组件：limitLength(value,maxWordsCount){returnvalue&&value.length>maxWordsCount?value.slice(0,+maxWordsCount):值；},//查询前先取有效值filterInputValue=async(v:any)=>{consttarget=v.currentTarget||v.targetletarr=[]letval=target.value//this.setState({isShowOptions:true})awaitthis.props.onHandleChange(val)//更新父组件值if(val){val=val.toString().trim()val=this.limitLength(val,6)arr=val.match(/^[\u4e00-\u9fa5]+(\d+)?$/)}if(arr&&Object.prototype.toString.call(arr)=='[objectArray]'&&arr.length){val=arr[0]}else{val=''}awaitthis.props.onHandleChange(val)//更新父组件值this.searchValue(val)//再查询}React版自定义输入表input字段组件，封装compositionstart/compositionend：import*asReactfrom'react'importPropTypesfrom'prop-types'import'./input-field.less'//检测是否是chrome//constisChrome=!!window.chrome&&!!window.chrome.webstoreconstnoop=()=>{}interfaceInputField{isOnComposition:Boolean,emittedInput:Boolean,}classInputFieldextendsReact.PureComponent{staticpropTypes={值：PropTypes.any，默认值：PropTypes.any，onChange：PropTypes.func,onInputChange:PropTypes.func}staticdefaultProps={onChange:noop,onInputChange:noop}constructor(props:any,context:any){super(props,context)this.state={值：this.props.value||this.props.defaultValue||''}this.isOnComposition=falsethis.emittedInput=true}componentWillReceiveProps(nextProps:any){const{value}=nextPropsif(value!==this.state.value){this.setState({value})}}handleInputChange=(event:any)=>{让userInputValue=event.target.valuethis.setState({value:userInputValue})if(!this.isOnComposition){event.target.value=userInputValuethis.props.onInputChange(event)this.emittedInput=true}else{this.emittedInput=false}this.props.onChange(userInputValue)}handleComposition=(event:any)=>{if(event.type==='compositionstart'){this.isOnComposition=真this.emittedInput=假}elseif(event.type==='compositionend'){this.isOnComposition=false//针对Chromev53+修复并检测所有Chrome//https://chromium.googlesource.com/chromium/src/+/afce9d93e76f2ff81baaa088a4ea25f67d1a76b3%5E%21///也修复了在组合事件之前发出输入事件的原生Apple键盘//订阅这个问题：https://github.com/facebook/react/issues/8683if(!this.emittedInput){this.handleInputChange(event)}}}handleKeyUp=(e:any)=>{const{onPressEnter,...restProps}=this.propsvarevent=e||窗口事件；varkey=event.which||事件.keyCode||事件.charCode;if(key==13){onPressEnter(event)/*做点什么。调用一些方法*/}}render(){const{onInputChange,onBlur,onPressEnter,...restProps}=this.propsreturn(
)}}exportdefaultInputField总结一下React和Vue中的输入控件在处理中文方面有些不同。在Vue中，通过@input事件，可以直接在输入框中输入中文，选择中文。事件被触发，但是React没有@input事件，需要对原生输入表单的compositionStart和compositionEnd事件进行额外的控制才能达到类似的效果
