如何阻止React.js中表单submit点击事件自动触发两次？

问题根源及解决步骤： #

1. 阻止表单默认提交行为
   浏览器表单默认提交会触发页面刷新，导致组件重新渲染，这是重复提交的常见诱因。必须在提交处理器里调用event.preventDefault()禁用默认行为。

2. 添加提交状态锁
   用户快速点击提交按钮会触发多次提交，需要用状态变量控制提交状态，提交过程中禁用按钮，避免重复触发。

修改后的完整代码： #

import { useState } from 'react';

// 假设已定义enteredTitle、enteredAmount、enteredDate的状态及对应changeHandler
const [isSubmitting, setIsSubmitting] = useState(false);

const submitHandler = async (event) =>{
    event.preventDefault(); // 阻止默认提交行为

    if (isSubmitting) return; // 正在提交时直接返回，避免重复触发
    setIsSubmitting(true);

    const expenseData = {
        title: enteredTitle,
        amount: enteredAmount,
        date: new Date(enteredDate)
    };

    console.log(expenseData);
    // 这里可添加API请求逻辑，示例：
    // await fetch('/api/expenses', {
    //   method: 'POST',
    //   body: JSON.stringify(expenseData),
    //   headers: { 'Content-Type': 'application/json' }
    // });

    setIsSubmitting(false); // 提交完成后重置状态
};

return (
    <form onSubmit={submitHandler}>
        <div className='new-expense__controls'>
            <div className='new-expense__control'>
                <label className='new-expense__control label'> Title </label>
                <input className='new-expense__control input' type='text' onChange={titleChangeHandler} />
            </div>
            <div className='new-expense__control'>
                <label className='new-expense__control label'> Amount </label>
                <input className='new-expense__control input' type='number' min='0.01' step='0.01' onChange={amountChangeHandler} />
            </div>
            <div className='new-expense__control'>
                <label className='new-expense__control label'> Date </label>
                <input className='new-expense__control input' type='date' min='2019-01-01' max='2023-12-31' onChange={dateChangeHandler}/>
            </div>
            <div className='new-expense__actions'>
                <button disabled={isSubmitting}> {isSubmitting ? 'Adding...' : 'Add Expense'} </button>
            </div>
        </div>
    </form>
);

额外修正说明： #

原代码中日期输入的step属性使用错误，已修正为max='2023-12-31'，符合日期输入框的属性规范。

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