反应协调会导致意想不到的结果

Question

您好，我有一个关于反应协调的问题。

这是我的代码

const Foo = () => {
   const [buttonId, setButtonId] = useState(1);

   const handleClick = (e: React.MouseEvent) => {

      // when I uncomment below line, submit is blocked.
      // e.preventDefault();

      // when I comment below line, form submission not occurred. 
      // it makes sense because Btn2 Element doesn't exist never anymore 
      setButtonId(2);
   };

   const handleSubmit = () => {
      // when click Btn 1, handleSubmit is called and printed 'submit!'
      console.log('submit!');
   };

   return (
      <form onSubmit={handleSubmit}>
         <input type="text" name="dummy" value="dummy" />

         // Why is the form submitted when I clicked on Btn 1? 
         {buttonId === 1 ? (
           <button type="button" onClick={handleClick}>Btn 1</button>
         ) : (
           <button type="submit">Btn 2</button>
         )}
      </form>
   )
};

当我单击button1时，即使button1没有type="submit"，也会处理表单提交。

更奇怪的是，当我在 Button1 onClick 处理程序中取消注释 e.preventDefault() 并单击它时，不会发生表单提交。

为什么处理点击事件（handleclick）的处理程序绑定到下一个按钮的提交事件中涉及的第一个按钮？反应协调的结果是否符合预期且正确？

我猜测是在对账过程中更新元素类型的过程中出现的问题。

我已经知道为每个按钮注册不同的按键可以解决这个问题。但我想知道为什么会发生这种情况。

谁能给我一个清晰的想法？

请查看此链接：https://codesandbox.io /s/ecstatic-wozniak-s7r7rq?file=/src/App.js

Answer 1

尝试向 button 元素添加一个键，以便 React 知道这些是不同的元素

    <form onSubmit={handleSubmit}>
      <input type="text" name="dummy" value="dummy" />

      {buttonId === 1 ? (
        <button key="1" type="button" onClick={handleClick}>
          Btn 1
        </button>
      ) : (
        <button key="2" type="submit">Btn 2</button>
      )}
    </form>