hola, tengo una pregunta sobre la reconciliación de reacción.

aquí está mi código

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

Cuando hago clic en el botón 1, el envío del formulario se procesa aunque el botón 1 no tenga type="submit" .

Lo que es aún más extraño es que cuando elimino el comentario e.preventDefault() en el controlador button1 onClick y hago clic en él, no se envía el formulario.

¿Por qué el controlador que maneja el evento de clic ( handleclick ) está limitado al primer botón involucrado en el evento de envío del siguiente botón? ¿Es el resultado esperado y correcto en la reconciliación de reacción?

Supongo que es un problema que se da en el proceso de actualización del tipo de elemento durante el proceso de reconciliación.

Ya sé que registrar diferentes teclas para cada botón puede resolver este problema. pero quiero saber por qué sucede esto.

¿Quién me va a dar un pensamiento claro?

Consulte este enlace: https://codesandbox.io/s/ecstatic-wozniak-s7r7rq?file=/src/App.js