react如何写搜索框

react如何写搜索框

react写搜索框的思路:

1、添加一个input框,为它绑定onChange事件

2、在onChange事件中通过拼接url和input框的内容得到一个搜索链接;

3、通过fetch-jsonp库的fetchJsonp方法请求链接,得到搜索的内容。

代码如下:

hover.css:

*  {
    margin: 0;
    padding: 0;
}

li.hover {
    background: #ccc;
    color: darkgreen;
}

js代码:

import React,{Component} from 'react';
import ReactDom from 'react-dom';
import fetchJsonp from 'fetch-jsonp';
import './css/hover.css';

class Baidu extends Component{
    constructor(){
        super();
        this.state={
            ipt: '',
            arr: []
        }
        this.iptChange = this.iptChange.bind(this);
        this.fnOver = this.fnOver.bind(this);
        this.fnOut = this.fnOut.bind(this);
    }
    iptChange(ev){
        this.setState({
            ipt: ev.target.value
        })
        let URL = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=';

        // 切记,是URL+ev.target.value而非this.state.ipt↓
        因为setState({})是一个异步过程。
     //或者将请求放在this.setState的回调函数里。
     即:this.setState(,()=>{...在这里请求数据就可以直接使用this.state.ipt了...});

        fetchJsonp(URL+ev.target.value,{jsonpCallback:'cb'}).then((streamObj)=>{
            streamObj.json().then((data)=>{
                // console.log(data)
                this.setState({
                    arr: data.s
                })
            })
        })
    }
    fnOver(ev){
        ev.target.className='hover'
    }
    fnOut(ev){
        ev.target.className=''
    }
    render(){
        return (
            <div>
                <input type="text" value={this.state.ipt1} onChange={this.iptChange} />百度
                <ul>
                    {
                        this.state.arr.map((val,index)=>{
                            return (
                                <li key={index} onMouseOver={this.fnOver} 
                                onMouseOut={this.fnOut}>{val}</li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

ReactDom.render(
    <Baidu></Baidu>,
    document.querySelector('#app')
)
Image placeholder
前端答疑
未设置
  74人点赞

没有讨论,发表一下自己的看法吧

推荐文章
react如何使用css?

react如何使用css?在react中使用css有以下几种方法一、全局使用app.jsimportReactfrom'react'; importRouterfrom"./router" impor

javascript如何判断是不是整数?

方式一、使用取余运算符判断任何整数都会被1整除,即余数是0。利用这个规则来判断是否是整数。functionisInteger(obj){ returnobj%1===0 } isInteger(3);

asp.net如何调用css

asp.net如何调用css1、静态方式调用在head标签中加入link标签2、引用了模板页的页面添加方式首先可以定义一个类:(相关课程推荐:css视频教程)staticpublicclassAddS

如何写react组件

如何写react组件组件作为React的核心内容,是View的重要组成部分,每一个View页面都由一个或多个组件构成,可以说组件是React应用程序的基石元素。React支持三种方式来定义组件●函数式

如何写出让同事好维护的代码?

上篇牛逼:如何写出让同事无法维护的代码?这篇教你如何写出不让同事无法维护的代码!写出整洁的代码,是每个程序员的追求。《cleancode》指出,要想写出好的代码,首先得知道什么是肮脏代码、什么是整洁代

.vue文件中如何写注释?

.vue文件中如何写注释?.vue文件中,每个代码块内,注释的时候,需要使用各自语言的注释语法去注释(HTML、CSS、JavaScript、Jade等)。在文件最顶部注释的时候用HTML的注释语法:

如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...在ProductionMode下,React并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。条件浏览器安装了ReactD

你真的了解 React 吗?这里有 50 个 React 面试问题

如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了React面试中最常见的50大问题,这是一份理想的指南,让你为React相关的面试做好充分的准备工作。首先我

React Hooks 完全指南,读React作者博文感悟(2W字精华)

阅读facebook大佬:DanAbramov的文章颇有感悟大佬github地址https://github.com/gaearon 重点总结 useEffect是同步的 状态是捕获的当前props

技术宅告诉你如何搜索更安全

前言百度从14年开始就已经对外开放了HTTPS的访问,并于15年3月初正式对全网用户进行了HTTPS跳转。你也许会问,切换就切换呗,和我有啥关系?我平常用百度还不是照常顺顺当当的,没感觉到什么切换。话

两个月三项成果,对标谷歌!独家对话小米AutoML团队,如何让模型搜索更公平

大数据文摘出品作者:曹培信机器学习自动化(AutoML)正在引领机器学习的下一个时代,而要想让机器自己学会“炼丹”,其中最关键的步骤就是,找到最合适的算法模型,也即自动化神经架构搜索(NeuralAr

同义词搜索是如何做到的?

前面几个章节我们使用到了Lucene的中文分词器HanLPAnalyzer,它并不是Lucene自带的中文分词器。Lucene确实自带了一些中文分词器,但是效果比较弱,在生产实践中多用第三方中文分词器

干货:构建复杂的 Eloquent 搜索过滤

最近,我需要在开发的事件管理系统中实现搜索功能。一开始只是简单的几个选项(通过名称,邮箱等搜索),到后面参数变得越来越多。 今天,我会介绍整个过程以及如何构建灵活且可扩展的搜索系统。如果你想查看代码

Go语言高级编程_6.4 分布式搜索引擎

6.4分布式搜索引擎 在Web一章中,我们提到MySQL很脆弱。数据库系统本身要保证实时和强一致性,所以其功能设计上都是为了满足这种一致性需求。比如writeaheadlog的设计,基于B+树实现的索

搜索引擎百度已死,但其他业务在重生

年初有一篇《搜索引擎百度已死》的文章在全网刷屏,文章尖锐指出百度搜索有一半以上结果导向了自己的百家号,而百家号上大量低劣和营销的内容严重误导了用户,事后百度回应说其百家号的内容占比小于10%。与此同时

在头条和百度搜索了100个关键词之后,我们发现……

作者|闫丽娇苏琦编辑|苏琦• 常用名词搜索方面,百度站外内容占比更高,内容来源比头条更多元。头条搜索的信息流广告目前还没有接入;• 疑问解答类搜索,百度的内容发散性更杂,而头条在信息准确度上更能理解用

微软张若非:搜索引擎和广告系统,那些你所不知的AI落地技术

这两年,被誉为“ 皇冠上的明珠”的自然语言处理领域发展愈发火热,成为了业内新宠,而 搜索和广告这两大老牌技术领域似乎已被大家遗忘。其实,这两大接地气的工程领域仍是各企业竞相抢夺的市场之一。近日,AI科

解决Element UI input输入框不能使用回车进行搜索

因为使用vue修饰符绑定键盘事件报错,不知道怎么解决...所以想出了一个神奇的解决方法...1、绑定输入事件,每次输入就把输入的内容存到本地储存 //输入搜索内容 inputSearchInfo(

1.0. 抽象工厂模式(Abstract Factory)

1.1.1.目的 在不指定具体类的情况下创建一系列相关或依赖对象。通常创建的类都实现相同的接口。抽象工厂的客户并不关心这些对象是如何创建的,它只是知道它们是如何一起运行的。 1.1.2.UML图 1

IBM Spectrum Protect 8.1.7在AIX7.1上的安装和配置

                                                本文作者: 谷铁柏摘要:    本文章主要讲述IBMSpectrumProtect8.1.7版本在AIX

React-native如何变为移动端的弄潮儿

转载本文需注明出处:微信公众号EAWorld,违者必究。引言:随着移动端对用户体验要求越来越友好,以及企业对代码能够跨平台执行的迫切需求。React-Native因此应运而生,从出生就一直备受关注。 

如何运行一个react项目?

React起源于Facebook的内部项目,因为该公司对市场上所有JavaScriptMVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好用,就在20

如何快速新建react项目?

创建一个react项目有三种方式:1.create-react-app快速脚手架(简单,类似于vue-cli工具)2.webpack一步一步构建3.第三方脚手架(generator-react-web

如何在cmd中下载react模板

如何在cmd中下载react模板打开cmd命令行窗口,输入npm-version,查看当前的npm版本如果npm版本是5.2以上版本,在cmd中输入npxcreate-react-appmy-app,

如何在idea中下载react

如何在idea中下载react1、首先安装Terminal插件File—>Settings—>Plugins搜索Terminal,打上勾,重启idea2、按下alt+f12打开Terminal工具3、