在 react 中添加enter键出搜索

在React 中enter 键的大致思路就是在document.body上添加“keyup/keydown”事件，然后在keycode=13即按下enter键时触发此事件。

接下来将呈现在React 的 构造函数组 件以及 函数组件 中如何添加 enter 键搜索

函数组件

class Index extends React.componnet{
	 componentDidMount(){
     	document.body.addEventListener('keydown',this.handleKeyDown);
 	 }
  	 componentWillUnmount(){
       document.body.removeEventListener('keydown',this.handleKeyDown)
       this.setState = ()=> false//销毁异步方法放置报错
     }
     handleKeyDown(e){
    	if(window.event){
        	e = window.event
   	    }
       let code = e.charCode || e.keyCode
       if(code === 13){
          e.stopPropagation()//阻止冒泡或捕获促使enter键下拉框展开
          this.handleSubmit(e)
       }
     }
     handleSubmit(e){
	   //书写自己的代码
     }

     render(){
	   <Form//如使用form表单在此添加方法
		   onSubmit={this.handleSubmit.bind(this)}
	   >

	   </Form>
     }
}
 

函数组件

function Index(){
	useEffect(()=>{
		document.body.addEventListener('keydown',(e)=>{
			if(window,event){
				e = window.event;
			}
			let code = e.charCode || e.keyCode
			if(code === 13){
				e.stopPropagation()
				this.handleSubmit(e)	
			}
		})
	
		return()=>{//销毁组件内添加的方法
			document.body.removeEventListener('keydown',()=>{})
		}		
	},[handleSubmit])
}