以编程方式提交表单 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 };