React表单提交在Chrome正常但Firefox无响应问题求助

我开发的React表单提交功能在Chrome中可正常运行：提交后组件重新加载，正确显示新增名称；但在Firefox中点击提交后无任何反应。相关代码如下：

function handleSubmit(event){
        axios.post('/api/addname', {name})
    }

function handleOnChange(event){
        if (event.target.name === 'name'){
            setName(event.target.value);
        };
    };

return (
      <div>   
        <form onSubmit={handleSubmit}>
            <input onChange={handleOnChange} placeholder="New name" name="name" value={name}/> ()
            <input type='submit' value='Add name'/>
        </form>
      </div>
  )

问题原因 #

核心问题是未阻止表单提交的浏览器默认行为。点击提交按钮时，浏览器会默认发起同步表单提交，导致页面刷新/跳转，直接中断异步的axios请求。Chrome与Firefox对异步请求和页面刷新的时序处理存在差异：Chrome可能在页面刷新前完成了请求，因此能显示新增数据；而Firefox中默认提交行为直接中断了请求，所以无任何反馈。

修复方案 #

1. 在handleSubmit中调用event.preventDefault()，阻止浏览器默认提交行为
2. 给axios请求添加回调，处理成功/失败场景，同时可手动更新组件状态

修正后的代码 #

function handleSubmit(event){
    // 阻止浏览器默认表单提交行为
    event.preventDefault();
    axios.post('/api/addname', {name})
        .then(() => {
            // 请求成功后清空输入框
            setName('');
            // 若需重新加载数据，可在此调用获取列表的函数
            // fetchNameList();
        })
        .catch(error => {
            // 处理请求错误，便于调试
            console.error('添加名称失败:', error);
        });
}

function handleOnChange(event){
    if (event.target.name === 'name'){
        setName(event.target.value);
    };
};

return (
    <div>   
        <form onSubmit={handleSubmit}>
            <input onChange={handleOnChange} placeholder="New name" name="name" value={name}/>
            <input type='submit' value='Add name'/>
        </form>
    </div>
)

额外说明 #

• event.preventDefault()是React表单异步处理的标准操作，必须添加以避免默认行为干扰
• 移除原JSX中输入框后的无效()代码
• 添加请求回调可提升用户体验，同时方便排查问题

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