reactjs React -使用useRef触发表单提交

ebdffaop  于 2023-06-22  发布在  React
关注(0)|答案(5)|浏览(141)

日安,所以我试图在表单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>)

本质上,我想在提交表单或执行表单操作之前对服务器进行一些调用并获取结果。

dkqlctbz

dkqlctbz1#

你试过:

formEl.current && formEl.current.submit();

pxq42qpu

pxq42qpu2#

从React 17开始,你必须在事件中添加cancelablebubbles属性。否则,从已接受的答案得到的解决方案将不起作用。它是由事件委托中的一些更改引起的。

formEl?.current.dispatchEvent(
  new Event("submit", { cancelable: true, bubbles: true })
);

答案是here

jogvjijk

jogvjijk3#

传递事件,然后阻止其默认操作

const performSubmit =(e) => {

 // stop the form from actually submitting
 e.preventDefault();

 //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={(e) => performSubmit(e)} id="x1" method="POST" action="https://url.aspx" target="_top">
    <input value={config.param}/>
    <button type="submit"> Submit</button>
</form>)
tv6aics1

tv6aics14#

试试看

form?.current.dispatchEvent(new Event("submit"));
du7egjpx

du7egjpx5#

和我一起工作

const fromRef = useRef<HTMLFormElement>()

形式:

<form ref={fromRef} onSubmit={handleSubmit(onSubmit)}>

btn:

<Button onClick={() => {
      fromRef.current.requestSubmit()

    }} colorScheme='blue'>Save</Button>

相关问题