ReactJS中如何在输入框onBlur事件触发时提交表单？

我来给你捋捋这个问题的解决思路，刚好之前处理过类似的动态表单场景，不用ref完全能搞定，主要靠事件对象和DOM原生方法就能实现，下面给你两种实用的方案：

方案一：事件委托（适合大量动态表单的场景） #

因为表单是动态生成的，提前给每个输入框绑定事件太麻烦，我们可以把事件监听委托到所有表单的父容器上。不过要注意，blur事件是不冒泡的，所以得用事件捕获模式来监听：

// 假设所有动态表单都放在这个父容器里
const formContainer = document.getElementById('form-container');

// 用捕获模式监听blur事件
formContainer.addEventListener('blur', function(e) {
  // 只处理表单内的输入/选择/文本域元素
  const validTags = ['INPUT', 'SELECT', 'TEXTAREA'];
  if (validTags.includes(e.target.tagName)) {
    // 向上查找当前元素所属的最近表单
    const targetForm = e.target.closest('form');
    if (targetForm) {
      // 提交表单
      targetForm.submit();
      // 如果是框架环境（比如React），可以用dispatchEvent触发submit事件
      // targetForm.dispatchEvent(new Event('submit'));
    }
  }
}, true);

这个方案的好处是不管后续生成多少表单，都不需要额外绑定事件，父容器会统一处理所有子元素的blur事件。

方案二：动态创建表单时绑定blur事件 #

如果是你自己写JS动态生成表单，可以在创建输入控件的时候直接绑定blur事件，这样每个输入框都能直接关联到所属的表单：

function createDynamicForm(formId, fieldValue) {
  // 创建表单元素
  const form = document.createElement('form');
  form.action = `/submit/${formId}`;
  form.method = 'POST';

  // 创建输入框
  const input = document.createElement('input');
  input.name = 'content';
  input.value = fieldValue;

  // 绑定blur事件，直接提交当前表单
  input.addEventListener('blur', function() {
    form.submit();
  });

  // 把输入框加入表单，再把表单加入页面
  form.appendChild(input);
  document.getElementById('form-container').appendChild(form);
}

这种方式逻辑更直观，每个输入框和表单的关联关系在创建时就确定了，不会出错。

框架环境下的适配（以React为例） #

如果你用React这类框架渲染动态表单，也可以用类似的思路，不用ref就能实现：

function DynamicFormList({ formList, onFormSubmit }) {
  const handleInputBlur = (e) => {
    // 找到当前输入框所属的表单
    const targetForm = e.target.closest('form');
    if (targetForm) {
      // 触发表单的submit事件（React的表单一般会阻止默认提交，自己处理逻辑）
      targetForm.dispatchEvent(new Event('submit'));
    }
  };

  return (
    <div className="form-list">
      {formList.map((formItem, index) => (
        <form
          key={index}
          onSubmit={(e) => {
            e.preventDefault();
            // 调用自定义的提交逻辑
            onFormSubmit(formItem.id, formItem.value);
          }}
        >
          <input
            type="text"
            value={formItem.value}
            onChange={(e) => {/* 这里处理输入值的更新逻辑 */}}
            onBlur={handleInputBlur}
          />
        </form>
      ))}
    </div>
  );
}

核心要点总结 #

• 利用DOM的closest('form')方法，从触发blur的输入元素向上查找最近的表单，完美适配动态生成的元素，不需要提前知道表单的ID或ref。
• 注意blur事件不冒泡的特性，事件委托时必须用捕获模式（addEventListener第三个参数设为true）。
• 框架环境下，记得配合受控组件的状态更新逻辑，确保提交时的数据是最新的。

内容的提问来源于stack exchange，提问作者user3129330