Как добавить действие и метод, включенный в форму, внутри onClick, включенного в кнопку. Я использую Reactjs - PullRequest
Новая
       37

Как добавить действие и метод, включенный в форму, внутри onClick, включенного в кнопку. Я использую Reactjs

0 голосов
/ 10 января 2020

У меня есть этот HTML код, предоставленный платежной платформой под названием PayU: 

import React, { useState, useEffect } from 'react';
import md5 from 'md5'
//const { tokeUser } = getTokenAuthCookie();

const Purchase = (props: any) => {
    const [amount, setAmount] = useState('0')
    const apiKey = '#######'
    const merchantId = '#####'
    const referenceCode = `TestPayU${new Date()}`

    const signature = md5(`${apiKey}~${merchantId}~${referenceCode}~${amount}~COP`)

    const handleChange = ({ target: { value } }: any) => setAmount(value);

    return (

      <form method="post" action="https://sandbox.checkout.payulatam.com/ppp-web-gateway-payu/">
        <input name="merchantId"    type="hidden"  value="000000"   />
        <input name="accountId"     type="hidden"  value="000000" />
        <input name="description"   type="hidden"  value="Testing"  />
        <input name="referenceCode" type="hidden"  value={referenceCode} />
        <input name="amount"        type="text"    value={amount}  onChange={handleChange} />
        <input name="tax"           type="hidden"  value="0"  />
        <input name="taxReturnBase" type="hidden"  value="0" />
        <input name="currency"      type="hidden"  value="COP" />
        <input name="signature"     type="hidden"  value={signature}  />
        <input name="test"          type="hidden"  value="1" />
        <input name="buyerEmail"    type="hidden"  value="aaaaaaa@yopmail.com" />
        <input name="responseUrl"    type="hidden"  value="" />
        <input name="confirmationUrl"    type="hidden"  value="" />
        <input name="Submit"        type="submit"  value="Send" />
      </form>
    );
}

export default Purchase;

Мне нужно добавить предыдущий код на экране, я делаю это: 

<div style={{display: "flex", justifyContent: "center", marginTop: "20px"}}>
        <form method="post" action="https://sandbox.checkout.payulatam.com/ppp-web-gateway-payu/">
          <Button className="button-upd" onClick={handleUploadDocuments}>
            Listo
          </Button>
            <input name="merchantId"    type="hidden"  value="000000"   />
            <input name="accountId"     type="hidden"  value="000000" />
            <input name="description"   type="hidden"  value="Probando con nueva transaccion"  />
            <input name="referenceCode" type="hidden"  value={referenceCode} />
            <input name="amount"        type="hidden"    value={amount} onChange={handleChange} />
            <input name="tax"           type="hidden"  value="0"  />
            <input name="taxReturnBase" type="hidden"  value="0" />
            <input name="currency"      type="hidden"  value="COP" />
            <input name="signature"     type="hidden"  value={signature}  />
            <input name="test"          type="hidden"  value="1" />
            <input name="buyerEmail"    type="hidden"  value="aaaaaa@yopmail.com" />
            <input name="responseUrl"    type="hidden"  value="" />
            <input name="confirmationUrl"    type="hidden"  value="" />
        </form>
      </div>

Проблема в том, что метод handleUploadDocuments, добавленный в onCLick кнопки, не работает, этот метод содержит следующее: 

const handleUploadDocuments = useCallback(async () => {
    try {
      const userDocument = Object.entries(docs)
        .filter(([_,value]) => !!value && !(value as any).isFetched)
        .map(([key, value]) => ({ [key]: value }))
        .reduce((acm,curr) => ({...acm, ...curr }));

      const { data: { newDocuments } } = await uploadUserDocument({ variables: { userDocument } });
      setFetchedDocument(newDocuments);
      alert("Documentos exitosamente subidos subidos")
    } catch (error) {
      console.log({error})
    }
  }, [docs]);

Как сделать так, чтобы при нажатии кнопки, содержащей метод handleUploadDocuments, было выполнено, а также Действие формы?

Я действительно ценю, кто может мне помочь.

...