React验证码组件实现最近一直在死循环过程中写bug和修复bug。总结一个我修改过的验证码组件，原生实现输入框代码=this.handleTab.bind(this)this.handleDelete=this.handleDelete.bind(this)}handleChange(e){constinput=e.target.valueif(this.props.onChange){this.props.onChange(input)}this.handleTab(e)}handleDelete(e){constBACK_SPACE=8constisBackSpaceKey=e.keyCode===BACK_SPACEif(isBackSpaceKey&&e.target.value.length===0){letprevious=e.targetprevious=previous.previousElementSiblingwhile(previous){if(previous===null)breakif(previous.tagName.toLowerCase()==='输入'){前一个。重点（）break}}}}handlePaste(e){让剪贴板数据=e.clipboardData||window.clipboardData;if(clipboardData){letclipdata=clipboardData.getData('Text')returnthis.props.handlePaste(clipdata)}}handleTab(e){consttarget=e.targetconstinput=target.valueif(input.length>=this.props.maxLength){letnext=targetnext=next.nextElementSiblingwhile(next){if(next===null)breakif(next.tagName.toLowerCase()==='input'){next.focus()break}}}}render(){return((this._input=c)}onPaste={(e)=>{this.handlePaste(e)}}/>)}}exportdefaultAutotabInput验证码组常见的六位数字验证码importReactfrom"react";importAutoTabInputfrom"./AutoTabInput.jsx";类CodeInput扩展React.Component{constructor(props){super(props);this.state={};}unitOnChange(index,unit){returnthis.props.onChange(index,unit);}render(){conststyleObj={boxSizing:"border-box",border:"1pxsolid#cdcbcb",boxShadow:"none",outlineColor:"#1054ff",outlineWidth:"2px",textAlign:"center",marginRight:10};constlastStyleObj={boxSizing：“border-box”，border：“1pxsolid#cdcbcb”，boxShadow：“none”，outlineColor：“#1054ff”，outlineWidth：“2px”，textAlign：“center”，}；conststyleErr={boxSizing:"border-box",border:"1pxsolid#f44236",boxShadow:"none",outline:'none',textAlign:"center",marginRight:10};constlastStyleErr={boxSizing:"border-box",border:"1pxsolid#f44236",boxShadow:"none",outline:'none',textAlign:"center",};返回({this.props.allDelete？(
{this.props.resetCode();this.refs.myinput._input.focus();}}/>):("")}
);}}exportdefaultCodeInput;github连接https://github.com/xiaopingzh...
