求助：无法持久设置DHL公开在线表单的输入框值

问题背景 #

尝试了各种常规方法设置DHL公开表单的输入值（包括Stack Overflow上的常见方案）均无效，以「姓名」字段（ID为address.receiver.name2）为例：

• 执行input.value = 'John'，输入框临时显示值，但点击页面其他区域或提交表单时会被清除
• 执行input.setAttribute('value', 'John')完全无效
• 仅手动输入的值能正常保留，且表单内容支持页面刷新/导航后恢复

原因分析 #

这类表单通常基于前端框架（如React、Vue）或自定义状态管理系统开发，输入框的真实值绑定在框架内部状态中：

1. 直接修改DOM的value仅更新了视图层，未同步到框架的内部状态，后续框架状态更新时会覆盖DOM值
2. 表单绑定了input、blur等事件用于校验和状态同步，手动修改DOM不会触发这些事件，导致状态不同步

解决方案 #

方案1：模拟真实输入事件（推荐） #

修改DOM值后，触发标准的input和blur事件，让框架感知到值的变化并同步状态：

const input = document.getElementById('address.receiver.name2');
// 设置输入框值
input.value = 'John';
// 触发input事件，同步框架内部状态
const inputEvent = new Event('input', { bubbles: true, cancelable: true });
input.dispatchEvent(inputEvent);
// 触发blur事件，模拟用户输入后离开的行为（部分表单需要此步骤）
const blurEvent = new Event('blur', { bubbles: true, cancelable: true });
input.dispatchEvent(blurEvent);

方案2：直接操作框架内部状态（应急方案） #

如果表单基于React构建，可尝试定位组件实例并修改其内部状态（注意：依赖框架内部实现，版本更新可能失效）：

const input = document.getElementById('address.receiver.name2');
// 定位React组件实例（不同React版本属性名可能有差异）
const reactInstance = input._reactRootContainer?._internalRoot?.current?.child;
if (reactInstance) {
  // 修改对应状态字段（需根据实际结构调整路径）
  reactInstance.memoizedState.next.next.state.value = 'John';
  // 强制组件更新视图
  reactInstance.stateNode.forceUpdate();
}

验证设置是否生效 #

执行完设置后，可通过以下方式验证值是否持久化：

const form = input.closest('form');
const formData = new FormData(form);
console.log(formData.get('address.receiver.name2')); // 输出'John'则说明设置成功

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