useStep 钩子函数不能与 onClick 箭头函数一起使用？

Question

我的目标是当人们点击提交按钮时，如果用户没有在文本框中输入任何内容，它会发出警报。但如果他们确实输入了某些内容，它将使用next 前进到下一页。我可以做一个或另一个，但是当我尝试同时做两个时，只有checkInput() 运行。

我还注意到，当我尝试将next 与箭头函数一起使用时，它不再起作用（我怀疑这是部分原因）。有人可以解释为什么我不能以这种方式使用 next 吗？另外，关于如何使用onClick 运行这两个函数的任何建议？

const checkInput = (input, navigation) => {
  if (!input.trim()) {
    alert(
      'Please leave a response. If your listening environment has not changed, "N/A" and similar responses are acceptable.'
    );
  }
};

const Feedback = ({ navigation }) => {
  const [input, setInput] = useState("");
  const { next } = navigation;
  // const clickHandler = txt = {

  // }

  return (
    <div className="container grid">
      <ReactMarkdown
        children={`#### **Post-Evaluation Survey**\n ${text.post_eval} \n\n**NOTE:** Your answer will not affect your 
                compensation.`}
      />
      <textarea
        rows="4"
        onChange={(e) => setInput(e.target.value)}
        placeholder="My neighbor started moving their lawn."
      ></textarea>
      <div className="section col-2 align-right">
        <a
          href="#"
          className="button"
          onClick={() => {
            checkInput(input);
            next;
          }}
        >
          Submit
        </a>
      </div>
    </div>
  );
};

export default Feedback;

Answer 1

如果在检查输入中包含下一个呢？

const checkInput = (input, navigation) => {
  if (!input.trim()) {
    alert(
      'Please leave a response. If your listening environment has not changed, "N/A" and similar responses are acceptable.'
    );
  } else {
    next()
  }
};