Soy un principiante de reacción y me gustaría crear 2 entradas para nombre y apellido.
Cuando llamo a <Item/> , el foco en la entrada desaparece después de escribir un carácter, pero cuando llamo a {Item()} todo funciona bien como se esperaba. Me parece un comportamiento extraño y mi pregunta es ¿por qué? ¿Algunas ideas?
const { useState } = React; function Item() { const [firstName, setFirstName] = useState("John"); const [lastName, setLastName] = useState("Rambo"); function HandleFirstNameChange(event) { setFirstName(event.target.value); } function HandleLastNameChange(event) { setLastName(event.target.value); } // display function Display(props) { return ( <div> {firstName}, {lastName} </div> ); } // edit function Edit(props) { return ( <div> <form> <input type="text" value={firstName} onChange={HandleFirstNameChange} /> <input type="text" value={lastName} onChange={HandleLastNameChange} /> </form> </div> ); } return ( <div> <Display /> {/* here after typing one character focus of input disappears */} <Edit /> {/* here everything works fine as expected */} {Edit()} {/* whyyyy?? */} </div> ); } ReactDOM.render(<Item />, document.body); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>Esto se debe a que está definiendo el componente Editar dentro del componente Elemento y, por lo tanto, en cada procesamiento, la función Editar se definirá nuevamente y, por eso, reaccionar intentará reemplazarlo en el árbol DOM en cada procesamiento.
Cuando está llamando a la función, en realidad no está utilizando la función de edición como un componente de React. El siguiente código funcionará bien.
import React, { useState } from "react"; // display function Display(props) { const { firstName, lastName } = props; return ( <div> {firstName}, {lastName} </div> ); } // edit function Edit(props) { const { firstName, HandleFirstNameChange, lastName, HandleLastNameChange } = props; return ( <div> <form> <input type="text" value={firstName} onChange={HandleFirstNameChange} /> <input type="text" value={lastName} onChange={HandleLastNameChange} /> </form> </div> ); } function Item() { const [firstName, setFirstName] = useState("John"); const [lastName, setLastName] = useState("Rambo"); function HandleFirstNameChange(event) { setFirstName(event.target.value); } function HandleLastNameChange(event) { setLastName(event.target.value); } return ( <div> <Display firstName={firstName} lastName={lastName} /> {/* here after typing one character focus of input disappears */} <Edit firstName={firstName} lastName={lastName} HandleFirstNameChange={HandleFirstNameChange} HandleLastNameChange={HandleLastNameChange} /> </div> ); } export default Item;