【搜索式导航栏】

[index.js]

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(

    <React.StrictMode>

        <App/>

    </React.StrictMode>

)

 

[Search.js]

import React, { useState } from 'react';

const Search = () => {

    const [searchTerm, setSearchTerm] = useState('');

    const [searchResults, setSearchResults] = useState([]);

 

    const handleButtonClick = () => {

        // 过滤搜索结果

        const filteredResults = MOCK_DATA.filter((item) =>

            item.toLowerCase().includes(searchTerm.toLowerCase())

        );

        setSearchResults(filteredResults);

    };

    return (

        <div>

            <input

                type="text"

                value={searchTerm}

                onChange={(event) => setSearchTerm(event.target.value)}

                placeholder="输入搜索条件"

            />

            <button onClick={handleButtonClick}>搜索</NOtton>

            <ul>

                {searchResults.map((result, index) => (

                    <li key={index}>{result}</li>

                ))}

            </ul>

        </div>

    );

};

 

const MOCK_DATA = [

    '草莓',

    '葡萄',

];

export default Search;

 

 [App.js]

import React from 'react';

import { BrowserRouter as Router, Route, Routes} from 'react-router-dom'

import Home from "./Page";

const div1={

    width:"1200px",

    height:"70px",

    backgroundColor:"#0e0e10",

    margin:"auto",

    textAlign:"left",

    lineHeight:"70px",

    color:"#4662b9"

}

function App(){

    return(

        <div>

            <div style={div1}>

                <Router>

                    <Routes>

                        <Route exact path="/" element={<Home/>}/>

                    </Routes>

                </Router>

            </div>

        </div>

    )

}

export default App;

 

[Page.js]

import React from "react";

import {Link} from "react-router-dom";

import Search from "./Search";

export default function Home(){

    return(

        <div >

            <strong style={{fontSize:"35px"}}>&nbsp;&nbsp;&nbsp;React</strong>

            <Link to="https://www.tsinghua.edu.cn/" style={{marginLeft:'100px',color:"#edeef1",fontSize:"20px"}}>文档</Link>

            <Link to="https://www.pku.edu.cn/" style={{marginLeft:'100px',color:"#edeef1",fontSize:"20px"}}>教程</Link>

            <Link to="https://www.zju.edu.cn/" style={{marginLeft:'100px',color:"#edeef1",fontSize:"20px"}}>博客</Link>

            <Link to="https://www.nju.edu.cn/" style={{marginLeft:'100px',color:"#edeef1",fontSize:"20px"}}>社区</Link>

            <Search/>

        </div>

 

    );

}