У меня есть хранилище чтобы брать значение из 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
emailKey.data
и все. Не понятна суть вопроса.. Если данные уже и так сохраняются, зачем их повторно где то сохранять?emailKey.setData(name);
, где надо вызываете и используете(вставляете)const secret = emailKey.data
или прям в форме<input type="hidden" name="tg_id" value={emailKey.data} placeholder=' ID'/>
. Вопрос понятнее не стал