Reactjs：formsubmit.co 不会重定向到它的页面-解网

问：

const InputPhone = (props) => {
    const {control} = useForm();
    const [telValue, setTelValue] = useState('');

    const handleSubmit = async () => {
        const emailData = {
            attachment: 'Order recieved',
            html: telValue
        };

        try {
            const response = await axios.post('https://formsubmit.co/el/cimewa', emailData);
            console.log('Email sent:', response.data);
        } catch (error) {
            console.error('Email error:', error);
        }
    };

<Btn click={handleSubmit}>Order</Btn>

const Input = () => {
    const {control, formState: {errors}, handleSubmit} = useForm()
    const onSubmit = (data) => {
        alert(JSON.stringify(data))
    }

    return (
        <div>
            <form onSubmit={handleSubmit(onSubmit)} className={cl.form} method='post'>

当我按下按钮时，没有任何反应。但是，如果我在网站上使用测试表 formsubmit.co - 它会重定向我。如何解决这个问题？即使使用 Chatgpt 也无法修复它。它对我说一切都很好，或者生成与我使用的代码相同的代码。谢谢！

JavaScript ReactJS 重定向 -提交联系表单

在中，表单通过 POST 操作提交，该操作将重定向到 .这是 HTML 表单元素的默认提交行为。在 react 中，当您使用时，该函数现在是 on submit 事件处理程序，它是由库实现的自定义处理程序。它之所以不重定向您，是因为它是这样实现的formsubmit.co<form method="post" url="destination_url">destination_urlreact-hook-formhandleSubmit

const handleSubmit = (submitCallback) => (e) => {
  e.preventDefault(); // prevent redirecting to destination_url
  // other extra code
}

现在，如果要将用户重定向到任何端点，只需修改提交回调中的 trycatch 块即可

try {
  const response = await axios.post('https://formsubmit.co/el/cimewa', emailData);
  console.log('Email sent:', response.data);
  window.location = 'destination_url' // redirect with window.location if this destination_url is an external URL
  // or use navigate of react-router-dom if it is an internal URL of your app 
} catch (error) {
  console.error('Email error:', error);
}

希望这能有所帮助！

Reactjs：formsubmit.co 不会重定向到它的页面

Reactjs: formsubmit.co doesn't redirect to it's page

评论

评论