React组件跳转与表单提交事件同时触发问题（已解决）

问题描述 #

我在React组件的表单中遇到以下问题：点击提交按钮时，希望同时完成两件事——调用onStepChange函数实现组件跳转，以及调用onSubmitAnswer处理函数校验答案对错，但两种写法都无法同时满足需求：

• 给按钮添加onClick调用onStepChange时，控制台出现Form submission canceled because the form is not connected警告，看不到校验日志，但能完成组件跳转；
• 将按钮改为type="submit"且不调用onStepChange时，能正常输出校验日志，但无法实现组件跳转。

原组件代码如下：

import React, { useState } from 'react';

export const Answering = ({ onStepChange }) => {
  const [userAnswer, setUserAnswer] = useState('');

  const onSubmitAnswer = (event) => {
    event.preventDefault();
    // * Correct answer, at the moment hardcoded
    const correctAnswer = 'Vienna, Austria';
    if (userAnswer === correctAnswer) {
      console.log('Correct answer')
    } else {
      console.log('Wrong answer')
    }
  };

  return (
    <form onSubmit={onSubmitAnswer}>
      <div>
        <h2>We are headed to:</h2>
        <div className="select-container">
          <select
            className="select"
            id="selectInput"
            value={userAnswer}
            onChange={(event) => {
              setUserAnswer(event.target.value)
            }}>
            <option value="">The city is:</option>
            <option value="Vienna, Austria">Vienna, Austria</option>
            <option value="Helsinki, Finland">Helsinki, Finland</option>
            <option value="Oslo, Norway">Oslo, Norway</option>
          </select>
        </div>
      </div>
      <div className="button-container">
        <button
          className="button"
          onClick={() => {
            onStepChange();
          }}>
          Submit
        </button>
      </div>
    </form>
  );
};

解决方案 #

将onStepChange函数移至onSubmitAnswer处理函数内部调用，不再单独在按钮的onClick中触发。修改后的代码如下：

import React, { useState } from 'react';

export const Answering = ({ onStepChange }) => {
  const [userAnswer, setUserAnswer] = useState('');

  const onSubmitAnswer = (event) => {
    event.preventDefault();
    // * Correct answer, at the moment hardcoded
    const correctAnswer = 'Vienna, Austria';
    if (userAnswer === correctAnswer) {
      console.log('Correct answer')
    } else {
      console.log('Wrong answer')
    }
    // 完成校验后调用组件跳转函数
    onStepChange();
  };

  return (
    <form onSubmit={onSubmitAnswer}>
      <div>
        <h2>We are headed to:</h2>
        <div className="select-container">
          <select
            className="select"
            id="selectInput"
            value={userAnswer}
            onChange={(event) => {
              setUserAnswer(event.target.value)
            }}>
            <option value="">The city is:</option>
            <option value="Vienna, Austria">Vienna, Austria</option>
            <option value="Helsinki, Finland">Helsinki, Finland</option>
            <option value="Oslo, Norway">Oslo, Norway</option>
          </select>
        </div>
      </div>
      <div className="button-container">
        <button type="submit" className="button">
          Submit
        </button>
      </div>
    </form>
  );
};

逻辑说明 #

• 原写法中，按钮的onClick先触发组件跳转，导致表单的onSubmit事件被中断，因此无法执行校验逻辑；
• 修改后，表单提交时会先完整执行onSubmitAnswer内的校验逻辑，再调用onStepChange实现跳转，确保两个操作都能正常完成。

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