React Ref Form onSubmit Handler 未触发

Question

我有一个表格。

我尝试从不同的功能提交此表单。

为此，我创建了一个 ref 。此 ref 在打印时具有正确的 HTML 节点，并且此节点还具有 submit 方法。当调用此提交方法时 ( formNode.submit() ) 表单已提交， 但 永远不会触发 onSubmit 处理程序。

为什么？

这是一个显示相同行为的简化示例。

 class Form extends React.Component {
  constructor() {
    super();

    this.form = React.createRef();
  }

  render() {
    return (
      <div onClick={() => this.form.submit()}>
        Click me!
        <form
          onSubmit={e => console.log(e)}
          ref={f => (this.form = f)}
        />
      </div>
    );
  }
}

https://codesandbox.io/s/vm8pkmony

原文由 SlootSantos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于您的特定用例，您必须使用 dispatchEvent 表单的 submit 事件。

 this.form.dispatchEvent(new Event("submit"));

原文由 br0k3n c0d3 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

从 React 17 开始，您必须向事件添加 cancelable 和 bubbles 属性。否则，接受的答案中的解决方案将不起作用。这是由于 事件委托的一些变化 引起的。

 this.form.dispatchEvent(
    new Event("submit", { cancelable: true, bubbles: true })
);

原文由 Karol Dabrowski 发布，翻译遵循 CC BY-SA 4.0 许可协议