以編程方式提交表單 React

Question

我正在嘗試在句柄內提交我的 for 在反應中提交 function。 我想在提交表單之前預取一些信息並添加到表單中，所以我需要在句柄提交 function 中處理它。 完成我需要做的操作后，我未能觸發提交。 有人可以幫助我嗎？

我試過evt.currentTarget.submit()但它告訴提交不是 function。

import React, { useEffect } from 'react';

const CheckoutPayfastComponent: React.FC = () => {
useEffect(() => {
});

const handleSubmit = (evt: React.FormEvent<HTMLFormElement>) => {
    evt.preventDefault();        
    evt.currentTarget.action = "https://sandbox.payfast.co.za/eng/process";
    // trigger submit here
}

return (
    <div>
        <form onSubmit={handleSubmit} method="POST" id="checkout"> 
            <input type="hidden" name="cell_number" value="0823456789"></input>
            <input type="hidden" name="email_confirmation" value="1"></input>

            <input type="hidden" name="amount" value="550.00"></input>
            <input type="hidden" name="item_name" value="General Plan"></input>
            <input type="hidden" name="subscription_type" value="1"></input>
            <input type="hidden" name="billing_date" value="2020-07-04"></input>
            <input type="hidden" name="recurring_amount" value="550.00"></input>
            <input type="hidden" name="frequency" value="4"></input>
            <input type="hidden" name="cycles" value="0"></input>

            <input type="submit" name="submit" value="Submit" id="ss-submit" ></input>
        </form>

    </div>
    );
}

 export { CheckoutPayfastComponent };

Answer 1

嘗試使用FormData提交表單 import React, { useEffect } from 'react';

const CheckoutPayfastComponent: React.FC = () => {

const [myForm, setMyFormData] = useState({})

const handleSubmit = (evt: React.FormEvent<HTMLFormElement>) => {
    evt.preventDefault();        
    evt.currentTarget.action = "https://sandbox.payfast.co.za/eng/process";
    // trigger submit here

    let formData = new FormData();
    Object.keys(myForm).forEach(formName=>{
       formData.append(formName, myForm[formName]);
    });

    fetch("api/to/submit/my/formdata", {
        body: formData,
        method: "post"
    });
}

const onInputChange = (evt)=>{
  setMyFormData({[evt.target.name]: evt.target.value})
}

return (
    <div>
        <form onSubmit={handleSubmit} method="POST" id="checkout"> 
            <input type="hidden" name="cell_number" value="0823456789" onChange={onInputChange}></input>
            <input type="hidden" name="email_confirmation" value="1" onChange={onInputChange}></input>

            <input type="hidden" name="amount" value="550.00" onChange={onInputChange}></input>
            <input type="hidden" name="item_name" value="General Plan" onChange={onInputChange}></input>
            <input type="hidden" name="subscription_type" value="1" onChange={onInputChange}></input>
            <input type="hidden" name="billing_date" value="2020-07-04" onChange={onInputChange}></input>
            <input type="hidden" name="recurring_amount" value="550.00" onChange={onInputChange}></input>
            <input type="hidden" name="frequency" value="4" onChange={onInputChange}></input>
            <input type="hidden" name="cycles" value="0" onChange={onInputChange}></input>

            <input type="submit" name="submit" value="Submit" id="ss-submit" onChange={onInputChange}></input>
        </form>

    </div>
    );
}

 export { CheckoutPayfastComponent };