Как сделать так чтобы при клике значение сохранялось в хранилище redux

Question

У меня есть хранилище чтобы брать значение из input и отправлять его туда, затем брать его из хранилища и использовать его в нужном месте, но не могу сделать так чтобы значение бралось только при клике Отправить и сохранялось в хранилище, значение изменяется при вводе информации(букв, цифр) или их удалении.

Таких хранилищ у меня 3, для email, для number и значение валюты, это один из них

class StoreEmail {
    #data = "";
    constructor(begin) {
      this.#data = begin || "";
    }
  
    setData(data) {
      this.#data = data;
    }
  
    get data() {
      return this.#data;
    }
  }
  
  const emailKey = new StoreEmail();
  
  export { emailKey };

Тут, на странице Payment я должен взять значение и сохранить в хранилище, а затем вставить её в value внутри ipnut на странице Success где всё это я передам в бэкенд через post.

import styles from './Payment.module.css'
import Link from 'next/link'
import { useState, useEffect} from 'react';
import { payKey } from "../Store";
import {amountKey} from '../StoreAmount'

const Pay = ()=>{
    
 

    const [amount, setAmount] = useState('');
  
       useEffect(() => {
           amountKey.setData(Number(amount));
       }, [amount])

    
       if (typeof window !== 'undefined') {
        const localData = localStorage.getItem('client')
        const [code, setCode] = useState(localData? JSON.parse(localData): console.log('ERROR'))  
        console.log(code)
      }

      
     useEffect(()=>{
       localStorage.setItem('client', JSON.stringify(payKey.data))  
     })

  

   
   
    
    return(
        <>
             <div className={styles.wrapper}>
          <div className={styles.container}>
         
          <form action="https://app.0xProcessing.com/Payment" method="post">
                          <input type="hidden" name="test" value="true" />
                          <input type="email" name="email" placeholder='Email'/>
                          <input type="number" name="amountusd"  placeholder='Количество' value={amount} onChange={(e) => setAmount(e.target.value)} />
                          <input type="text" name="currency" placeholder='Валюта' />
                          <input type="hidden" name="ShopId" value="6QsQHcQ6bX" />
                          <input type="hidden" name="ClientId" value={payKey.data} />
                          <input type="hidden" name='SuccessUrl' value={`https://next-js-web-sandy.vercel.app/success/?id=${payKey.data}`}/>
                          <input type="hidden" name='AutoReturn' value="true" />
                          <button type="submit">Send</button>
          </form>     

          </div>
         </div>
         <h1 className={styles.heading}><Link href={`/?id=${payKey.data}`}><button>Назад</button></Link></h1>
        </>
    )

}

export default Pay

Вот страница Success,

import Link from 'next/link'
import { useRouter } from 'next/router'




const Success = ()=>{
     
   

    return(
        <>
          <form action="https://example.com/pay/success/" method="post">
           ///в value вставляю значение из инпута которое хранится в хранилище
                        <input type="hidden" name="tg_id" value={} placeholder=' ID'/>
                        <input type="hidden" name="amount"  placeholder='Количество' />
                        <input type="datetime-local"  name="date" placeholder='Время' />
                        <button type="submit">Send</button>
                        
           </form>     
           
        </>
    )
}

export default Success

Answer 1

Для сохранения в localStorage и возможности чтения данных, лучше всего это организовать в классе, который выполняет фукнцию хранилища данных:

class StoreEmail {
  #data = "";
  constructor() {
    // При создании, читаем из стора, если ничего нет, пустая строка
    this.#data = localStorage.getItem("key") || "";
  }
  /** @param {string} data */
  setData(data) {
    this.#data = data;
    localStorage.setItem("key", data); // Сохраняем данные в стор при изменении
  }

  get data() {
    return this.#data;
  }
}

В нужном компоненте

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

// Просто подставляем данные в нужном месте
<input type="hidden" name="tg_id" value={emailKey.data} placeholder=' ID'/>

Или сохраняем в состоянии компонента

const Success = ()=>{
  const [id, setId] = useState(emailKey.data)
  render (<input type="hidden" name="tg_id" value={id} placeholder=' ID'/>)
}

БЛОГ НА HUSL

Как сделать так чтобы при клике значение сохранялось в хранилище redux

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