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

最新推荐文章于 2024-07-16 11:07:16 发布

outstanding木槿

最新推荐文章于 2024-07-16 11:07:16 发布

阅读量1.7k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_47305413/article/details/134040343

版权

法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>
            
        )
    }
}