如何在 React.js 中搜索或输入输入部分时固定导航栏搜索栏的位置？

Question

实际上最初

Navbar

的所有容器都在中。但是在搜索栏上键入或搜索电影时。我认为

css

文件夹中发生了一些事情。任何人都好心帮忙。

Header.js

import React, { useState } from 'react';
import './Header.css';
import SearchIcon from '@mui/icons-material/Search';
import ShopTwoIcon from '@mui/icons-material/ShopTwo';
import { NavLink, Link } from 'react-router-dom';
import Container from "react-bootstrap/Container"
import Button from "react-bootstrap/Button";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import { logo, logo2 } from '../../assets';
import { useStateValue } from '../../StateProvider';
import { auth } from '../../firebase';
import Resultcard from '../watchlist/Resultcard';
import { SearchResultsList } from './SearchResultsList';


const Header = () => {

    const [{ basket, user }, dispatch] = useStateValue();

    const handleAuthentication = () => {
        if (user) {
            auth.signOut();
        }
    };

    // Watchlist Search
    

    const [ query, setQuery ] = useState("");
    const [results, setResults] = useState([]);


    const onChange = (e) => {
        e.preventDefault();

        setQuery(e.target.value);

        fetch(
            `https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_TMDB_KEY}&language=en-US&page=1&include_adult=false&query=${e.target.value}`
        )
            .then((res) => res.json())
            .then((data) => {
                //print search result on console
                console.log(data);

                if (!data.errors) {
                    setResults(data.results);
                } else {
                    setResults([]);
                }
            });
    };
    
 
return (
    <div className='header'>

        {/* Link Clonazon Logo with Homepage path => "/" */}
        <Link to = "/">

            {/* Logo  */}
            <img 
                className='header__logo'
                src={ logo2 }
                alt=""
            />
        </Link>


        {/* Searchbar */}

        <div className="header__movie__search">
            <div className='header__search' style={{ fontSize: 12 }}>
                <input
                    className='header__searchInput'
                    type="text"
                    id='header__search__placeholder'
                    placeholder='Search Chhavighar.com'
                    value={query}
                    onChange={onChange}
                />

                {/* Search Icon */}
                <SearchIcon
                    className='header__searchIcon'
                    style={{ fontSize: 35 }}
                />
            </div>

            <div className='search__movie__result'>
                {results && results.length > 0 && <SearchResultsList results={results} />}
            </div>


        </div>

     

        {/* Right Side Header Components  */}
        <div className='header__nav'>

            {/* SignIn  */}
            <Link to={!user && '/login'} style={{ textDecoration: 'none' }}>
                <div onClick={handleAuthentication} className='header__option'>

                    {/* user?.email || "Guest" */}

                    <span className='header__optionLineTwo'>
                    {!user ? 'Hi,' : 'Welcome,'} {!user ? 'Guest' : user?.email}
                    </span>
                    <span className='header__optionLineOne'>
                        {user ? 'Sign Out' : 'Sign In'}
                    </span>
                </div>
            </Link>

            {/* Your Watchlist */}
            <Link to='./watchlist' style={{ textDecoration: 'none' }}>
                <div className='header__option'>
                    <span className='header__optionLineTwo'>
                        Watchlist
                    </span>
                    <span className='header__optionLineOne'>
                        Your
                    </span>
                </div>
            </Link>

            {/* Booked Tickets => Orders */}
            <Link to='./orders' style={{ textDecoration: 'none' }}>
                <div className='header__option'>
                    <span className='header__optionLineTwo'>
                        Tickets
                    </span>
                    <span className='header__optionLineOne'>
                        Booked
                    </span>
                </div>
            </Link>

            

            {/* Sopping Basket Link to Booking page => "/bookings" */}
            <Link to="/booking" style={{ textDecoration: 'none' }}>
                {/* Sopping Basket */}
                <div className="header__optionBasket">
                    <ShopTwoIcon/>
                    <span className="header__optionLineTwo header__basketCount">
                        {basket?.length}
                    </span>
                </div>
            </Link>

        </div>

    </div>
  )
}

export default Header;

Header.css

.header {
    height: 60px;
    display: flex;
    align-items:center;
    background-color: #010510;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header__logo {
    width: 100px;
    object-fit: contain;
    margin: 0 30px;
}

.header__search {
    display: flex;
    flex: 1;
    align-items: center;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 10px;
}

.header__movie__search {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* align-items: center; */
    cursor: pointer;
    margin: auto;
}

.search__movie__result {
    /* margin-top: 2rem; */
    align-self: center;
    width: 90%;
}


.header__search:hover {
    outline: #01FF74;
    outline-color: aqua;
}

.header__searchInput {
    height: 30px;
    padding: 10px;
    border: none;
    border-radius: 3px 0 0 3px;
    width: 100%;
    outline: none;

}


.header__searchIcon {
    padding: 3px;
    height: 30px !important;
    background-color: gold;
    border: none;
    border-radius: 0px 3px 3px 0px;
    color: black;
}

.header__nav {
    display: flex;
    justify-content: space-evenly;
    margin-left: 10px;
    margin-right: 10px;
}

.header__option {
    display: flex;
    flex-direction: column;
    color: white;
    margin-left: 10px;
    margin-right: 10px;
}

.header__optionLineOne {
    font-size: 10px;
    font-weight: 600;
    color: #fce101;
}

.header__optionLineTwo {
    font-size: 13px;
    font-weight: 500;
    margin-top: -1px;
}

.header__optionBasket {
    display: flex;
    align-items: center;
    color: #01FF74;
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.header__basketCount {
    color: white;
    margin-left: 10px;
    margin-right: 10px;
}

SearchResultsList.js

import Resultcard from "../watchlist/Resultcard";
import "./SearchResultsList.css";

export const SearchResultsList = ({ results }) => {
  return (
    <div className="results-list">
      {results.map((movie, id) => {
        return <Resultcard movie={movie} key={id} />;
      })}
    </div>
  );
};

SearchResultsList.css

.results-list {
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 8px #ddd;
    border-radius: 10px;
    margin-top: 1rem;
    max-height: 500px;
    overflow-y: scroll;
    padding: 5px;
}