React Hook Form：setValue/field.onChange首次触发致页面滚至顶部

首次调用setValue或field.onChange时页面会跳回顶部，后续触发则无该滚动问题。

<Controller
  name='acknowledged_by_nurse'
  control={control}
  render={({ field, fieldState }) => (
    <Button 
      label="Acknowledge"
      disabled={acknowledged_by_nurse ?? false}
      color={acknowledged_by_nurse ? 'default' : 'primary'}
      onClick={() => {
        field.onChange(acknowledged_by_nurse_staff?.id)
        setValue('acknowledged_by_nurse_status', AcknowledgedStatus.ACKNOWLEDGED);
        setValue('acknowledged_by_nurse_date', moment().format('YYYY-MM-DD'));
      }}
    />
  )}
/>

1. 给按钮添加type="button"属性 #

这是最常见的触发原因：默认情况下按钮的type为submit，首次点击会触发表单的默认提交行为，导致页面滚动到顶部。明确指定type="button"即可避免该问题：

<Button 
  label="Acknowledge"
  type="button" // 新增该行
  disabled={acknowledged_by_nurse ?? false}
  color={acknowledged_by_nurse ? 'default' : 'primary'}
  onClick={() => {
    field.onChange(acknowledged_by_nurse_staff?.id)
    setValue('acknowledged_by_nurse_status', AcknowledgedStatus.ACKNOWLEDGED);
    setValue('acknowledged_by_nurse_date', moment().format('YYYY-MM-DD'));
  }}
/>

2. 检查表单提交处理逻辑 #

如果使用了原生<form>标签，要确保onSubmit函数中调用e.preventDefault()，阻止默认的页面刷新行为：

const handleSubmit = (data, e) => {
  e.preventDefault();
  // 你的表单提交逻辑
};

3. 关闭react-hook-form自动聚焦（可选） #

如果前两种方法无效，可尝试在useForm配置中关闭错误时的自动聚焦功能，避免因焦点跳转引发滚动：

const { control, setValue } = useForm({
  defaultValues: { /* 你的表单默认值 */ },
  shouldFocusError: false
});

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