所有复选框name相同时，如何实现滚动到第一个表单错误位置？

要解决这个问题，无需修改通用的ScrollToFieldError组件，只需调整表单的DOM结构，让组件能找到正确的目标元素进行滚动：

方案1：滚动到错误提示位置（推荐） #

当前组件会根据错误字段名查找第一个name属性匹配的元素，我们可以给错误提示的元素添加与字段名一致的name属性，这样组件会优先滚动到错误提示的位置，用户能直接看到错误信息：

{formikProps.touched.selectedIds && formikProps.errors.selectedIds ? (
  // 添加name属性与字段名匹配
  <div name="selectedIds" style={{ color: 'var(--ion-color-danger)' }}>
    {formikProps.errors.selectedIds}
  </div>
) : null}

方案2：滚动到第一个复选框位置 #

如果需要滚动到第一个复选框的位置，确保Ionic的复选框能被组件正确识别：
由于IonCheckbox会将原生input包裹在内部DOM结构中，我们可以给第一个IonItem添加name="selectedIds"属性，这样组件会找到这个容器元素并滚动到它：

<IonList>
  {items.map((item, index) => (
    <IonItem 
      key={item.id}
      // 给第一个复选框的容器添加匹配的name属性
      {...(index === 0 ? { name: 'selectedIds' } : {})}
    >
      <IonCheckbox
        name='selectedIds'
        value={item.id}
      >{`${item.name}`}</IonCheckbox>
    </IonItem>
  ))}
</IonList>

补充说明 #

• 原组件通过document.getElementsByName查找元素，因此只要页面中存在第一个name属性匹配错误字段名的元素，组件就会滚动到该位置。
• 如果你的页面使用了Ionic的IonContent作为滚动容器，上述方案依然有效，因为scrollIntoView会自动适配Ionic的滚动上下文。

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