在React中点击输入时触发表单onChange

Question

我正在创建具有一些额外功能的自定义 React 组件。我想让它尽可能接近默认的浏览器行为。每当我更改表单输入中的某些内容时，我希望更改事件冒泡到表单。不幸的是，我无法让它发挥作用。

我读到，即使在 React 的合成事件系统中，“change”事件显然也有些特殊。所提出的解决方案都不适合我，因为它们适用于较旧的 React 版本。

为了简化我的问题，我创建了这个演示，我想做的是从输入的 onPointerDown 或任何其他事件处理程序中触发 form.onChange 。当然，我不能直接调用 form.onChange，因为我无法控制这部分代码。一切都应该通过事件冒泡来完成。在 React 中是否有可能？我已经在一些流行的 UI 库中对其进行了测试，到目前为止，它们都没有对非本机选择组件执行此操作。

export function Demo() {
  return (
    <form
      onChange={(event) => {
        const form = event.currentTarget;
        const formData = new FormData(form);
        console.log(JSON.stringify(Array.from(formData)));
      }}
    >
      <input
        name="name"
        onPointerDown={(event) => {
          const changeEvent = new Event("change", { bubbles: true });
          event.currentTarget.dispatchEvent(changeEvent);
        }}
      />
    </form>
  );
}

Answer 1

您可以通过

event.currentTarget.form

访问当前输入的表单，因此您的代码可能如下所示：

export function Demo() {
  return (
    <form
      onChange={(event) => {
        const form = event.currentTarget;
        const formData = new FormData(form);
        console.log(JSON.stringify(Array.from(formData)));
      }}
    >
      <input
        name="name"
        onPointerDown={(event) => {
          const form = event.currentTarget.form;
          const changeEvent = new Event("change", { bubbles: true });
          form.dispatchEvent(changeEvent);
        }}
      />
    </form>
  );
}

但是我不太明白这一点，为什么要这样做，因为你可以创建一个提交按钮并使用它来提交表单：

export function Demo() {
  return (
    <form
      onSubmit={(event) => { // changed to onSubmit from onChange
        // do something with submitted data
      }}
    >
      <input name="name"/>
      <button type="submit">SUBMIT</button>
    </form>
  );
}