useStep hook的next方法在onClick箭头函数中不生效，如何同时实现校验与跳转？

问题原因 #

• 你没有正确执行next方法：JavaScript中函数需要添加()才会触发执行，你代码里只写了next仅代表引用这个函数对象，不会实际运行跳转逻辑。
• 现有校验逻辑没有返回结果，无法判断是否要执行跳转，不符合你「校验通过才进入下一页」的需求。
• 额外补充：你用a标签作为提交按钮，默认的href="#"会触发跳转到页面顶部的默认行为，需要阻止该默认事件避免异常。

修改方案 #

1. 调整校验函数，增加返回值判断校验是否通过

const checkInput = (input) => {
  if (!input.trim()) {
    alert(
      'Please leave a response. If your listening environment has not changed, "N/A" and similar responses are acceptable.'
    );
    // 校验不通过返回false
    return false;
  }
  // 校验通过返回true
  return true;
};

2. 修改点击事件逻辑，校验通过后再调用next方法

<a
  href="#"
  className="button"
  onClick={(e) => {
    // 阻止a标签默认跳转页首的行为
    e.preventDefault();
    const isValid = checkInput(input);
    if (isValid) {
      // 加()才是调用执行next方法
      next();
    }
  }}
>
  Submit
</a>

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