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

目录

法1:

法2:


法1:

在Input组件上绑定onKeyUp方法

javascript 复制代码
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组件里搜索框

javascript 复制代码
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>
            
        )
    }
}
相关推荐
yBmZlQzJ15 小时前
PyQt5 修改标签字体和颜色的程序
开发语言·python·qt
Mike_jia16 小时前
uuWAF:开源Web应用防火墙新标杆——从工业级防护到智能防御实战解析
前端
掘金安东尼16 小时前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
袁煦丞16 小时前
群晖NAS FTP远程文件仓库全球访问:cpolar内网穿透实验室第524个成功挑战
前端·程序员·远程工作
10001hours16 小时前
C语言第12讲
c语言·开发语言
前端小巷子16 小时前
JS 打造动态表格
前端·javascript·面试
努力的小帅16 小时前
C++_哈希
开发语言·c++·学习·算法·哈希算法·散列表
excel16 小时前
从卷积到全连接:用示例理解 CNN 的分层
前端
UNbuff_016 小时前
HTML 各种事件的使用说明书
前端·html
Mr. Cao code16 小时前
探索OpenResty:高性能Web开发利器
linux·运维·服务器·前端·nginx·ubuntu·openresty