Question

我有一张表格。

我尝试通过其他功能提交此表单。

为此，我创建了一个ref。该参考文件在打印时具有正确的HTML节点，并且该节点还具有submit方法。当调用此commit方法（formNode.submit()）时，将提交表单get，但但永远不会触发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

Answer 1

从 React 17 开始，您必须向事件添加 cancelable 和 bubbles 属性。否则，接受的答案中的解决方案将不起作用。它是由某些 changes in event delegation 引起的。

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

Answer 2

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

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

Answer 3

当您调用表单的submit函数时，不会触发submit事件。

此行为是有意的，因为我们假设如果您直接调用submit，则已经验证了表单。

Answer 4

对于 2021 年使用功能组件的人：

您必须在表单中包含一个addLast(E e) ，并且不需要添加其他道具来触发<button>的{{1}}事件！

例如：

onSubmit

React Ref Form onSubmit处理程序未触发

4 个答案: