能够回车触发和获取内容的搜索组件

迈不过友情╰ 2021-07-24 18:05 222阅读 0赞

import React from "react"
    import "./style.less"
    
    export default class SearchInput extends React.Component { 
    
        constructor(props){ 
            super(props);
            this.state = { 
                values:""
            }
        }
        
        getValuesHandler(event){ 
            this.setState({ 
                values:event.target.value
            })
        }
    
        keyUpHandler(event){ 
            /** * 回车判断 */
            if(event.keyCode == 13){ 
                // 动态路由跳转
                this.props.history.push("/search/"+this.state.values);
            }
        }
    
        render() { 
            return (
                <input
                    type="text"
                    className="search-input"
                    value={ this.state.values}
                    placeholder="请输入搜索内容"
                    onKeyUp={  this.keyUpHandler.bind(this) }
                    onChange={ this.getValuesHandler.bind(this)}
                />
            )
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，222人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 回车键触发搜索

document.onkeydown = function (event) { e = event ? event : (window.even

女爷i/ 2022年12月26日 10:16/ 0 赞/ 175 阅读

相关 JavaScript 能够改变 HTML 内容

JavaScript 能够改变 HTML 内容 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

落日映苍穹つ/ 2022年11月16日 01:44/ 0 赞/ 207 阅读

相关 html 搜索框回车搜索,在搜索框中输入运行回车

win7系统是我们比较熟悉的一个操作系统，也是微软史上最经典的一个系列，里面有很多的功能是我们日常生活中经常会使用到的，所以现在市场上对于win7系统都是一片好评。win7中有

╰+哭是因爲堅強的太久メ/ 2022年10月06日 07:58/ 0 赞/ 379 阅读

相关 Jquery搜索框获取回车事件

<!DOCTYPE html> <html> <head> <title></tit

古城微笑少年丶/ 2022年08月02日 07:24/ 0 赞/ 266 阅读

相关回车触发事件

document.onkeydown = function() \{ var keycode = document.all ? event.keyCode : event.

超、凢脫俗/ 2022年06月13日 13:47/ 0 赞/ 305 阅读

相关回车触发事件

1、回车触发按钮点击事件 $("body").keyup(function () { if (event.which == 13){

待我称王封你为后i/ 2022年06月08日 12:08/ 0 赞/ 293 阅读

相关 Vue event.target.value( ) 获取当前文本框的值（回车或者点击触发）

Vue event.target.value( ) 获取当前文本框的值（由事件触发时）情景描述：假设当前有一个文本框，当我输入内容之后，回车或者点击一个按钮，

素颜马尾好姑娘i/ 2022年05月26日 00:09/ 0 赞/ 630 阅读

相关 vue 输入框回车搜索

@keyup.enter="queryAdminRole" <el-input style="width:300px;"

红太狼/ 2022年03月16日 05:28/ 0 赞/ 348 阅读

相关 Google搜索规则——更准确的获取内容

完整匹配：在Google的输入框里，所有的空格都被理解为 ”+” 号。如果你输入的是mysql foreign key，那么返回的搜索结果里也许既有mysql存在，也有f

柔光的暖阳◎/ 2022年02月17日 18:47/ 0 赞/ 260 阅读

相关能够回车触发和获取内容的搜索组件

import React from "react" import "./style.less" export default class Se

迈不过友情╰/ 2021年07月24日 18:05/ 0 赞/ 223 阅读