React 實現 百度搜尋框 簡易

2021-10-23 08:57:49 字數 1115 閱讀 7827

import react from 'react'

;import

;//引入元件

import searchbox from "./components/searchbox"

; render (

)}

searchbox.js

import react from "react"

;//引入css檔案

import

'./searchbox.css'

//建立乙個類

class searchbox extends react.component

//直接用state裡的值 : this.state

//改變state裡的值 : this.setstate()}

render(

) onfocus=)}

} onblur=)}

} onkeydown=);

return;}

// 設定屬性 只要setstate 就會重新 render

this.setstate()}

else

if(e.keycode ==

= 38));

return;}

this.setstate()}

// 根據上下鍵切換,則給表單賦不同的值

let temp = this.state.history[this.state.selectindex]

; this.setstate()}

} />

>

>})}

);}}

export default searchbox;

searchbox.css

.history_active

.history_hidden

.history_text

仿百度搜尋框

1.設定和搜尋框兩個div fieldset,input,button,img ul,ol img box textsearch buttonsearch buttonsearch hover pop pop ul li pop ul li hover 3.js實現搜尋自動補充 獲取物件 var b...

百度搜尋框demo

如下 content type content text html charset utf 8 title q ul ul li ul li hover style 2.步驟二 定義demo函式 分析介面 資料 function demo data 迴圈的li寫入ul ul.innerhtml ht...

Jsonp原理 百度搜尋框

由於瀏覽器同源策略的限制,不同源的客戶端指令碼在沒明確授權的情況下,不能讀寫對方的資源。但是在實際專案中經常需要跨域進行訪問,jsonp就是一種很好的解決跨域問題的方法。1.web頁面上用script標籤引入js檔案時則不受是否跨域的影響 不僅如此,我們還發現凡是擁有 src 這個屬性的標籤都擁有跨...