Как передать данные с input на другую страницу

Question

Есть страница Admin с инпутами, когда мы вводим данные мы должны сохранить их и передать на другую страницу Home. Но они не связаны никак. Подскажите как это сделать

Страница Admin:

import React, {useState, useEffect} from 'react'
import {useNavigate } from 'react-router-dom'

function Admin() {

    const navigate = useNavigate();

    const formSave = ()=> {
        alert('Форма була збережена')
        console.log(inputName, inputSurname, inputPatric, inputSex);        
    }

    const formBack = ()=> {
        navigate('/')
    }


    const [inputName, setInputName] = useState('')
    const [inputSurname, setInputSurname] = useState('')
    const [inputPatric, setInputPatric] = useState('')
    const [inputSex, setInputSex] = useState('')

  return (
    <div className='admin'>
        <div className='admin-wrapper'>
            <span className='admin-wrapper__title'>Admin e-panel</span>
            <span className='admin-wrapper__subtitle'>E-document</span>
            <div className='admin-form'>
                <div className='admin-form__container'>
                    <div className='admin-form__block'>
                        <p>Name</p>
                        <input className="admin-input" type='text' placeholder='Введiть значення' value={inputName} onChange={(e)=> setInputName(e.target.value)}/>
                    </div>
                    <div className='admin-form__block'>
                        <p>Surname</p>
                        <input className="admin-input" type='text' placeholder='Введiть значення' value={inputSurname} onChange={(e)=> setInputSurname(e.target.value)}/>
                    </div>
                    <div className='admin-form__block'>
                        <p>Patric</p>
                        <input className="admin-input" type='text' placeholder='Введiть значення' value={inputPatric} onChange={(e)=> setInputPatric(e.target.value)}/>
                    </div>
                    <div className='admin-form__block'>
                        <p>Sex</p>
                        <input className="admin-input" type='text' placeholder='Введiть значення' value={inputSex} onChange={(e)=> setInputSex(e.target.value)}/>
                    </div>
                    <div className='admin-form__block'>
                        <p>Date of birth</p>
                        <input className="admin-input" type='text' placeholder='Введiть значення'/>
                    </div>
                    <div className='admin-form__block'>
                        <p>Expiry date</p>
                        <input className="admin-input" type='text' placeholder='Введiть значення'/>
                    </div>
                    <div className='admin-form__block'>
                        <p>Photo</p>
                        <input className="admin-input" type='text' placeholder='Введiть значення'/>
                    </div>
                    <div className='admin-form__block'>
                        <p>Country</p>
                        <input className="admin-input" type='text' placeholder='Введiть значення'/>
                    </div>
                </div>
                <div className='admin-form__button'>
                    <button onClick={formSave}>Зберегти</button>
                    <button onClick={formBack}>На головну</button>
                </div>
            </div>
        </div>

        <Admin name="Ruslan" />
    </div>
  )
}

export default Admin

Страница Home:

import React, {useState, useEffect} from 'react'
import girlPass from '../img/girl.png'


function Card({name}) {

    const [item, setItem] = useState([])

    useEffect(() => {
        fetch("https://62823a7fed9edf7bd880d6a4.mockapi.io/passports")
          .then((res) => {
            return res.json();
          })
          .then((json) => {
            setItem(json);
          });
      }, []);

    // console.log(item);



    return (<>
        {item.map((obj, index) => {
          return (
            <div className='card' key={index}>
              <div className='card-wrapper'>
                <div className='card-header'>
                  <span className='card-country'>{obj.country}</span>
                </div>
                <div className='card-general'>
                  <div className='card-info__top'>
                    <div className='card-info__img'><img src={obj.photo} alt="img"/></div>
                    <div className='card-info__text'>
                      <div className='card-info__text__birth'>
                        <span className='card-info__title'>Дата народження:</span>
                        <span className='card-info__subtitle'>{obj.birthDate}</span>
                      </div>
                      <div className='card-info__text__expiry'>
                        <span className='card-info__title'>Дiйсний до:</span>
                        <span className='card-info__subtitle'>{obj.expiryDate}</span>
                      </div>
                      <div className='card-info__text__sex'>
                        <span className='card-info__title'>Стать:</span>
                        <span className='card-info__subtitle'>{obj.sex}</span>
                      </div>
                    </div>
                  </div>
                  <div className='card-info__bottom'>
                    <div className='card-info__text__surname'>
                      <span className='card-info__title'>Прiзвище/Surname</span>
                      <span className='card-info__subtitle'>{obj.surname}</span>
                    </div>
                    <div className='card-info__text__name'>
                      <span className='card-info__title'>Iм’я/Name</span>
                      <span className='card-info__subtitle'>{obj.name}</span>
                    </div>
                    <div className='card-info__text__patronimyc'>
                      <span className='card-info__title'>По батьковi/Patronimyc</span>
                      <span className='card-info__subtitle'>{obj.patron}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )
        })}
      </>)
}

export default Card

Answer 1

Можно реализовать свое, примитивное хранилище данных.
Один из вариантов:

Создаем само хранилище с обработчиками

Допустим файл будет называться store.js

const state = {
  inputName: ''
}

/**
 * Хранилище данных приложения
 * @param {Object} action
 * @param {string} action.type Тип события
 * @param {any} action.data Данные
 */
function store(action) {
  switch (action.type) {
    case 'changeInputName':
      state.inputName = action.data;
      return { ...state };
    default:
      return { ...state };
  }
}

export { store }

Далее импортим эту функцию в Admin и Home

import { store } from './store.js'

В файле админ, например добавляем в функцию formSave

const formSave = ()=> {
    // Тут какой то код  
    store({type: 'changeInputName', data: inputName});
    // тут тоже может быть код
}

в файле Home, в useEffect.[] добавляем

useEffect(() => {
    //тут какой то код
    const fieldData = store({type: ''});
    // Далее расставляйте полученный значения по элементам или в state записывайте

}, []);

И вы на странице Home получите то, что сохранили на странице Admin Реализация, для примера, выполнена на примере одного поля.

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

БЛОГ НА HUSL

Как передать данные с input на другую страницу

Ответы (1 шт):