选择队伍与投注金额后点击Bet on this team按钮页面重载问题

选择投注队伍和投注金额后，点击「Bet on this team」按钮时，当前页面会自动重载。相关代码实现如下：

<div className='background'>
    <form onSubmit={onSubmit}>
        <select value={bet} onChange={(e) => SetBet(e.target.value)} >
            <option value="100">100$</option>
            <option value="200">200$</option>
            <option value="300">300$</option>
            <option value="400">400$</option>
            <option value="500">500$</option>
            <option value="600">600$</option>
            <option value="700">700$</option>
            <option value="800">800$</option>
            <option value="900">900$</option>
            <option value="1000">1000$</option>
        </select>
        <input className="betButton" type="submit" value="Bet on this team" />
    </form>
</div>

相关处理函数：

const onChange = (teamName) => {
    SetBetTeam(teamName)
    console.log(betTeam);
}

const onSubmit = () => {
    console.log(betTeam);
    console.log(bet);
}

解决方案 #

• 页面重载是因为表单的submit事件触发了浏览器默认提交行为，需在onSubmit函数中阻止该行为：
  修改onSubmit函数，接收事件参数并调用preventDefault()：

  const onSubmit = (e) => {
      e.preventDefault(); // 阻止表单默认提交，避免页面重载
      console.log(betTeam);
      console.log(bet);
  }
  

• 另外，onChange函数中直接打印betTeam无法获取最新值（因为SetBetTeam是异步更新状态），若需监听betTeam变化，可使用useEffect：

  import { useEffect } from 'react';
  
  useEffect(() => {
      console.log(betTeam);
  }, [betTeam]); // 当betTeam变化时执行
  

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