Question

我正在尝试在handleSubmit函数中提交我的for。我想在提交表单并将其添加到表单之前预取一些信息，因此我需要在handle提交功能中进行处理。完成所需的操作后，我无法触发提交。有人可以帮我吗？

我尝试了evt.currentTarget.submit()，但是它的提示提交不是函数。

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提交表单从'react'导入React，{useEffect};

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 };

以编程方式提交表单React

1 个答案: