React 实现百度搜索框(简易)

App.js

import React from 'react';
import './App.css';//引入组件
import SearchBox from "./components/SearchBox";
class App extends React.Component{render () {return (<div className="App"><SearchBox /></div>);}}export default App;

Searchbox.js

import React from "react";
//引入css文件
import './SearchBox.css'//创建一个类
class SearchBox extends React.Component {constructor(props) {super(props);  //调用父类构造函数this.state = {history: ['第一', '第二', '第三', '第四', '第五', '第六'],isShow: false,  //搜索历史的显示隐藏selectIndex: 0, //被选中的下标 改变颜色text: '', //input里的value值}//直接用state里的值 ： this.state//改变state里的值 : this.setState({ })}render() {return (<div><input type="text"value={this.state.text}onFocus={() => {   /*获取焦点*/this.setState({isShow: true})}}onBlur={() => { /* 失去焦点*/this.setState({isShow: false})}}onKeyDown={(e) => {  /*按下键盘事件*/if (e.keyCode === 40) {  /*下键*/this.state.selectIndex++;//判断下标 和 数组的长度相比if (this.state.selectIndex >= this.state.history.length) {this.setState({selectIndex: 0});return;}// 设置属性 只要setState 就会重新 renderthis.setState({selectIndex: this.state.selectIndex})} else if (e.keyCode === 38) {   /*上键*/this.state.selectIndex--;if (this.state.selectIndex < 0) {this.setState({selectIndex: this.state.history.length - 1});return;}this.setState({selectIndex: this.state.selectIndex})}// 根据上下键切换，则给表单赋不同的值let temp = this.state.history[this.state.selectIndex];this.setState({text: temp})}}/>{/*获取焦点 显示  失去焦点 隐藏*/}<div className={this.state.isShow ? 'history_active' : 'history_hidden'}>{// react中的循环this.state.history.map((ele, index) => {//添加class 用className  选中变颜色return <div className={this.state.selectIndex === index ? 'history_text' : ''}>{ele}</div>})}</div></div>);}
}export default SearchBox;

SearchBox.css

.history_active{display: block;
}
.history_hidden{display: none;
}
.history_text{color: royalblue;
}

React 实现百度搜索框(简易)相关推荐

用React实现百度搜索框（简易版）
1. DOM结构如下 2. state里面需要存储的数据: 3. 函数处理 4. 细节处理:控制列表的可见性如果说输入框没有值就不可见在CSS中设置display
站长工具|百度搜索框提示功能
百度向站长开放免费"百度搜索框"代码和"百度搜索框提示"代码.只需进行简单的设置, 即可将" 百度搜索框( 带提示功能)"功能快速加入到您的 ...
php百度搜索框代码,基于jquery的仿百度搜索框效果代码_jquery
先看看整个的效果图: 图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: CSS: .autoSearchText{ border:solid 1px #CFCFCF; he ...
让Excel也像百度搜索框一样，录入时逐步提示
像百度搜索框一样,录入时逐步提示百度搜索框中录入字符,会弹出提示框简化输入,并提升效率.Excel中也可以实现.
html搜索框下拉怎么做,一步一步教你实现仿百度搜索框下拉效果（上）
最终效果(chrome 下): 搜索框下拉 demo 今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果. 1.html 以及 css 部分首先你得要有个输入框,这里我用了控件,其次当用户 ...
百度搜索框提示词下拉列表的制作方法
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
百度搜索框怎么用HTML做,百度搜索框的基本实现
百度首页搜索框是这样的一个基本形式,我们搜索框里输入字符时就能显示出一些有关的联想词,如图2所示图1.png 图2.png 那么今天我们来写一下这种效果,不算一模一样,大概相同吧,哈哈. 第一步:在 ...
前端笔记31——在自己的网页中嵌入百度搜索框
前言在前面我分享了我学习到的表单知识,我也明白了我们常见的百度搜索框也是通过表单去实现的.下面分享一下在自己的网页中嵌入百度搜索框. 在自己的网页中嵌入百度搜索框 <!DOCTYPE html ...
仿百度搜索框–jQuery版本
仿百度搜索框–jQuery版本时维九月,序属三秋.此吾工作三个月之日,亦是吾重拾博客之时.一路坎坷走来,经历良多,收获甚多. 正题百度搜索框是企业开发中常用的一项功能,作为一个前端工作者,自然也是 ...

React 实现百度搜索框(简易)

React 实现百度搜索框(简易)相关推荐

最新文章

热门文章

React 实现 百度搜索框(简易)

React 实现 百度搜索框(简易)相关推荐

最新文章

热门文章

React 实现百度搜索框(简易)

React 实现百度搜索框(简易)相关推荐