Как можно установить форму поиска в заголовок сайта?

Question

Джордан

nextjs , react

Как можно установить форму поиска в заголовок сайта?

Здравствуйте! У меня всё работает корректно, и поисковик функционирует должным образом. Однако я хотел бы, чтобы поле ввода находилось в верхней части сайта. Я пробовал разные подходы, но, к сожалению, ничего не вышло. Можете помочь мне с решением этой задачи?  
<br/> components/jsph/JSPH-table.jsx  
<pre><code class="javascript">import classes from "./Jsph.module.css";
import useSWR from "swr";
import toast from "react-hot-toast";
import { useState } from "react";
import { ObjTable, SearchForm } from "../ObjTable";


const
  ADD = 'add',
  API_URL = "http://localhost:3333/items",
  CART_URL = "http://localhost:3333/cart",
  fetcher = async () =&gt; {
    const res = await fetch(API_URL);
    if (!res.ok) throw new Error("fetcher" + res.status);
    return await res.json();
  },
  infofetcher = async () =&gt; {
    console.log("infofetcher",);
    const pr = fetcher();
    toast.promise(pr, {
      loading: 'Загрузка',
      success: 'Авто-обновление',
      error: (err) =&gt; `${err.toString()}`,
    });
    return await pr
  };
export function JSPHTable() {
  const
    { data, error, isLoading, isValidating, mutate } = useSWR(API_URL, infofetcher, { revalidateOnFocus: false }),
    [addItem, setAddItem] = useState(),

    onClick = async event =&gt; {
      const
        action = event.target.closest('[data-action]')?.dataset?.action,
        id = +event.target.closest('[data-id]')?.dataset?.id;
      console.log("action and id", action, id);
      console.log("addItem", addItem);
      console.log("data", data);
      if (!action) return;
      let
        optimisticData;
      const
        getPromise = () =&gt; {
          switch (action) {
            case ADD:
              const newObj = {};

21 января 2025 г. 10:14

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы разместить форму поиска в заголовке вашего сайта, вам нужно будет немного изменить структуру вашего компонента и добавить новую форму в нужное место. Ниже описан общий план, который можно использовать для достижения этой цели.

### Шаги по добавлению формы поиска в заголовок

1. **Создайте компонент формы поиска**: если у вас его еще нет, вы можете создать отдельный компонент для формы поиска.

2. **Импортируйте компонент формы поиска**: вставьте его в ваше основное представление, так чтобы он находился в верхней части.

3. **Стилизация**: убедитесь, что форма поиска отображается корректно с помощью CSS.

### Примерный код

Вот пример, как это можно сделать с вашим текущим кодом:

```javascript
import React from 'react';
import classes from "./Jsph.module.css";
import useSWR from "swr";
import toast from "react-hot-toast";
import { useState } from "react";
import { ObjTable } from "../ObjTable";
import SearchForm from '../SearchForm'; // Импортируйте ваш компонент поиска

const ADD = 'add';
const API_URL = "http://localhost:3333/items";
const fetcher = async () => {
  const res = await fetch(API_URL);
  if (!res.ok) throw new Error("fetcher" + res.status);
  return await res.json();
};

export function JSPHTable() {
  const { data, error, isLoading } = useSWR(API_URL, fetcher);
  const [addItem, setAddItem] = useState();

  return (
    <div>
      <header>
        <h1>Название вашего сайта</h1>
        <SearchForm /> {/* Вставьте компонент формы поиска */}
      </header>
      {isLoading && <div>Loading...</div>}
      {error && <div>Ошибка загрузки данных.</div>}
      {data && <ObjTable items={data} />}
    </div>
  );
}
```

### Пример компонента `SearchForm`

Вот пример того, как может выглядеть ваш компонент поиска:

```javascript
import React, { useState } from 'react';

const SearchForm = () => {
  const [query, setQuery] = useState('');

  const handleSearch = (event) => {
    event.preventDefault();
    // Логика обработки поиска
    console.log("Поиск:", query);
  };

  return (
    <form onSubmit={handleSearch}>
      <input 
        type="text" 
        placeholder="Поиск..." 
        value={query} 
        onChange={(e) => setQuery(e.target.value)} 
      />
      <button type="submit">Поиск</button>
    </form>
  );
};

export default SearchForm;
```

### Стилизация

Не забудьте добавить стили в ваш CSS-файл, чтобы форма поиска выглядела эстетично и находилась в нужном месте.

```css
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f8f8f8;
}

header form {
  display: flex;
}

header input {
  margin-right: 5px;
}
```

### Запуск и тестирование

После внесения изменений, сохраните файлы и запустите ваше приложение. Убедитесь, что поле ввода поиска отображается в заголовке вашего сайта и работает корректно при отправке.

Answer 2

components/Link/index.jsx 
 import { SearchForm } from "../ObjTable/index"; 
 компонента SearchForm а точнее импорт не фигурирует в компоненте PagesWebsite может быть тебе надо вставить в шапку 
 компоненту которая ретернет форму.