使用JS完成Instagram注册年龄验证时无法触发下一步按钮如何解决

问题根因 #

Instagram前端基于React框架开发，年龄选择下拉框属于React受控组件，这类组件的表单值完全由React内部状态管理：

• 直接修改DOM的selectedIndex属性只会改变表层的界面展示，不会同步更新React的内部状态，因此页面表单校验逻辑无法识别到已填写的年龄信息，下一步按钮不会激活
• 点击下拉框时React会触发组件重渲染，会直接用内部状态的空值覆盖你手动修改的DOM属性，所以之前设置的值会被重置
• 即便手动移除下一步按钮的disabled属性，点击时提交的还是React内部存储的空值，自然不会有响应

可用代码 #

// 选中三个年龄选择下拉框
const ageSelects = document.querySelectorAll(".h144Z");

// 分别设置月、日、年的选中索引，可根据需求调整索引值
ageSelects[0].selectedIndex = 0; // 月份：0对应第一个选项，即1月
ageSelects[1].selectedIndex = 0; // 日期：0对应第一个选项，即1号
ageSelects[2].selectedIndex = 22; // 年份：22对应列表中第23个选项，请确认对应所需出生年份

// 关键步骤：给每个下拉框派发原生事件，通知React更新内部状态
ageSelects.forEach(select => {
  // 派发change事件同步选中值到React状态
  const changeEvent = new Event('change', { bubbles: true });
  select.dispatchEvent(changeEvent);
  // 若设置后仍未激活下一步，可保留下方代码派发blur事件触发失焦校验
  const blurEvent = new Event('blur', { bubbles: true });
  select.dispatchEvent(blurEvent);
});

操作说明 #

运行代码前可先在控制台执行console.log(ageSelects.length)，确认输出为3，保证选择器匹配到了全部三个下拉框。代码无报错运行后，React内部状态就会同步你设置的年龄值，页面校验通过后下一步按钮会自动激活，点击即可正常进入后续流程。

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