点击表单提交按钮，状态更新异常

问题

点击Edit Profile按钮，本应该隐藏名称文本显示输入框，但是结果却是显示输入框以后立马闪屏一下又变成了名称文本

代码片段及UI图片

export default function EditProfile() {
  ...
  const [status,setStatus] = useState("save")
  return (
    <form>
      <label>
        First name:{' '}
        {status==="edit"? <input 
          value={fName}
          onChange={e=>setFName(e.target.value)}
        />: <b>{fName}</b>}
      </label>
      ...
      <button type="submit" onClick={()=> setStatus(status==="edit"?"save":"edit")}>
        Edit Profile
      </button>
    </form>
  );
}

问题原因

没有阻止表单提交的默认行为，所以在表单提交按钮点击以后表单默认刷新了

正确代码

方案一、增加e.preventDefault()阻止表单默认事件

    ...
    <button type="submit" onClick={e=>{
      e.preventDefault()
      setStatus(status==="edit"?"save":"edit")}}
    >
        Edit Profile
      </button>

方案二、表单提交按钮的点击事件可以写在form表单上，用onSubmit接收

    <form onSubmit={e=>{ 
      e.preventDefault()
      setStatus(status==="edit"?"save":"edit")}}>
      <label>
      ...