Блог

Я создал панель поиска, вот код, пожалуйста, посмотрите

Но я ищу полноэкранную панель поиска с наложением для справки, добавляя изображение ( https://www.kindpng.com/imgv/mJxwxw_search-full-screen-overlay-css-full-screen-search /)

кто-нибудь может мне помочь с этим?

Я делаю это в react. Как я могу это сделать?

 import { Form, ListGroup, Jumbotron } from "react-bootstrap";
export default function Search() {
  // SET INITIAL STATE FOR query AND jokes
  // CREATE REF FOR SEARCH INPUT

  const [query, setQuery] = useState("");
  const [jokes, setJokes] = useState([]);
  const focusSearch = useRef(null);

  // useEffect - FOCUS ON SEARCH INPUT
  useEffect(() => {
    focusSearch.current.focus();
  }, []);

  // FETCH API DATA
  const getJokes = async (query) => {
    const results = await fetch(
      `https://icanhazdadjoke.com/search?term=${query}`,
      {
        headers: { accept: "application/json" }
      }
    );
    const jokesData = await results.json();
    return jokesData.results;
  };

  // PREVENTS RERENDER FLICKERING AS USER TYPES IN SEARCH
  const sleep = (ms) => {
    return new Promise((resolve) => setTimeout(resolve, ms));
  };

  // useEffect - ONLY RERENDERS WHEN query IS CHANGED
  useEffect(() => {
    let currentQuery = true;
    const controller = new AbortController();

    const loadJokes = async () => {
      if (!query) return setJokes([]);

      await sleep(350);
      if (currentQuery) {
        const jokes = await getJokes(query, controller);
        setJokes(jokes);
      }
    };
    loadJokes();

    return () => {
      currentQuery = false;
      controller.abort();
    };
  }, [query]);

  // RENDER JOKES
  let jokeComponents = jokes.map((joke, index) => {
    return (
      <ListGroup.Item key={index} action variant="secondary">
        {joke.joke}
      </ListGroup.Item>
    );
  });

  // RENDER COMPONENT
  return (
    <>
      <Jumbotron fluid>
        <Form id="search-form">
          <h4>Search</h4>
          <Form.Control
            type="email"
            placeholder="Search for a Joke..."
            ref={focusSearch}
            onChange={(e) => setQuery(e.target.value)}
            value={query}
          />
        </Form>

        <ListGroup>{jokeComponents}</ListGroup>
      </Jumbotron>
    </>
  );
}
 

Какой подход я должен предпринять?

Я бы полностью отказался от вашего кода, а затем использовал бы порталы React для создания родственного div.

index.html Добавьте это в файл, где #root находится div.

 <div id="root"></div>
<div id="modal"></div>

 

Теперь нам нужно создать портал React, поэтому создайте модальный компонент. Внутри этого:

 import React from 'react';
import ReactDOM from 'react-dom';

export default function Modal() {
    return ReactDOM.createPortal(
        <p>JSX for modal goes here</p>,
        document.querySelector('#modal')
    );
}
 

Недавно я написал блог о dev.to где я подробно рассматриваю порталы react. Проверьте это https://dev.to/akashshyam/an-introduction-to-react-portals-3im0 .

Теперь все, что вам нужно сделать, это добавить свой стиль и функциональность. Нажав на крестик, вы можете настроить отображение на none .