react-antd组件 input输入框： 实现按回车搜索

目录

法1：

法2：

---

法1：

在Input组件上绑定onKeyUp方法

import { Input, message } from 'antd';
 
class App extends React.Component{
 
    handeleSousuo = () => {
        this.props.form.validateFields((error, values) => {
            if(!error){
                axios.post().then(res => {
                    if(res.code === 200){
                        
                    } else {
                        message.error('出错啦，刷新试试！')
                    }
                })
            }
        })
    }
 
    inputKeyUp=(e)=>{
        console.log(e, 'e')
        if(e.keyCode === 13){
            this.handeleSousuo(); //调搜索接口 
        }
    }
 
 
    render(){
        return(
            <div>
                <Input onKeyUp={this.inputKeyUp} />
            div>
            
        )
    }
}

法2：

 antd组件里搜索框

import { Input } from 'antd';
 
const { Search } = Input ;
 
class App extends React.Component{
 
    search = () => {
        this.props.form.validateFields((error, values) => {
            if(!error){
                axios.post().then(res => {
                    if(res.code === 200){
                        
                    } else {
                        message.error('出错啦，刷新试试！')
                    }
                })
            }
        })
    }
 
   
    render(){
        return(
            <div>
                <Search onSearch={() => this.search()} />
            div>
            
        )
    }
}