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 实现 百度搜索框(简易)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。