реакция примирения вызывает неожиданный результат

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>
   )
};

Когда я нажимаю кнопку 1, отправка формы обрабатывается, хотя кнопка 1 не имеет type="submit".

Что еще более странно, когда я раскомментирую e.preventDefault()в обработчике button1 onClick и щелкните по нему, отправка формы не произошла.

Почему обработчик, обрабатывающий событие click( 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>