日安,所以我试图在表单action=“POST”发生之前执行一个中间函数。我尝试了两件事,首先onSubmit={functionName},但表单总是执行操作,即使在onSubmit函数中我返回false。其次,我一直在尝试使用Ref来编程分派提交事件,但什么也没发生?我基本上必须做一个服务器端调用,以获得发布的表单值的配置,不幸的是,我使用的外部API需要以这种方式提交表单。请任何帮助将不胜感激。
尝试1:
const performSubmit =() => {
//Using onSubmit and then only performing the return after the axios call is done
axiosCallFunction.then((res) => {
setConfig(res.data)
return true
}).catch((error)) => {
//Dont submit form
return false
})
}
return (
<form name="form" onSubmit={performSubmit} id="x1" method="POST" action="https://url.aspx" target="_top">
<input value={config.param}/>
<button type="submit"> Submit</button>
</form>)
尝试2
const formEl = useRef();
const performSubmit =() => {
//Currently not calling the submit on the form
formEl.current.dispatchEvent(new Event("submit"))
}
return (
<form name="form" ref={formEl} id="x1" method="POST" action="https://url.aspx" target="_top">
<input value={config.param}/>
<button onClick={performSubmit} />
</form>)
本质上,我想在提交表单或执行表单操作之前对服务器进行一些调用并获取结果。
5条答案
按热度按时间dkqlctbz1#
你试过:
?
pxq42qpu2#
从React 17开始,你必须在事件中添加
cancelable
和bubbles
属性。否则,从已接受的答案得到的解决方案将不起作用。它是由事件委托中的一些更改引起的。答案是here。
jogvjijk3#
传递事件,然后阻止其默认操作
通过事件
tv6aics14#
试试看
du7egjpx5#
和我一起工作
形式:
btn: