El problema al que me enfrento es realmente molesto, cuando intento editar el valor predeterminado de mi texto de entrada, el campo de entrada no escribe mis cambios o pierde el foco solo después de escribir el primer carácter y vuelve a su valor predeterminado . Pero tenga en cuenta que esto solo sucede cuando agrego el evento onChange. Si lo elimino, la entrada funciona normalmente. Lo que está sucediendo
const AddMaker = () => { const [make, setMake] = useState(); function ConditionalTableRow(props) { let { item, index } = props; if ( index === editModeIndex) return (<TableRowWithSave item={item} index={index} />) else return (<TableRowWithEdit item={item} index={index} />) } function TableRowWithSave(props) { let { item } = props; return ( <TableRow> <TableCell> <input type="text" defaultValue={item.make} onChange={e => setMake(e.target.value)} /> </TableCell> <TableCell> <button className="palletSaveButton" onClick={handleSaveClick}> Save </button> </TableCell> </TableRow> ) } return ( <TableBody> { records.map((item, index) => ( <ConditionalTableRow key={index} item={item} index={index} /> )) } </TableBody> ); }Intente agregar un atributo de value al elemento de entrada.
<input type="text" value={make} defaultValue={item.make} onChange={e => setMake(e.target.value)} />Mueva useState a TableRowWithSave y use value en lugar de defaultValue
function ConditionalTableRow(props) { let { item, index } = props; if ( index === editModeIndex) return (<TableRowWithSave item={item} index={index} />) else return (<TableRowWithEdit item={item} index={index} />) } function TableRowWithSave(props) { let { item } = props; const [make, setMake] = useState(item.make); return ( <TableRow> <TableCell> <input type="text" value={make} onChange={e => setMake(e.target.value)} /> </TableCell> <TableCell> <button className="palletSaveButton" onClick={handleSaveClick}> Save </button> </TableCell> </TableRow> ) } const AddMaker = () => { return ( <TableBody> { records.map((item, index) => ( <ConditionalTableRow key={index} item={item} index={index} /> )) } </TableBody> ); } EDITAR: también es mejor mover ConditionalTableRow y TableRowWithSave fuera AddMaker
La respuesta corta es posible porque con cada pulsación de tecla estás provocando una nueva representación con el evento onChange.
Esta es una gran pregunta, y tuve el mismo problema que era de 3 partes.
Teclas : cuando usa teclas aleatorias, cada renderizado hace que reaccione para perder el foco (key={Math.random()*36.4621596072}) .
EventTypes : onChange provoca una nueva representación con cada pulsación de tecla, pero esto también puede causar problemas. onBlur es mejor porque se actualiza después de hacer clic fuera de la entrada. Una entrada, a menos que desee "bind" a algo en la pantalla (constructores visuales), debe usar el evento onBlur .
Atributos : JSX no es HTML y tiene sus propios atributos (className,...) . En lugar de usar el valor, es mejor usar defaultValue={foo} en una entrada.
Una vez que cambié estas 3 cosas, funcionó muy bien. Ejemplo a continuación.
Padre:
const [near, setNear] = useState( "" ); const [location, setLocation] = useState( "" ); <ExperienceFormWhere slug={slug} questionWhere={question_where} setLocation={handleChangeSetLocation} locationState={location} setNear={setNear} nearState={near} key={36.4621596072}/>Niño:
<input defaultValue={locationState} className={slug+"_question_where_select search_a_location"} onBlur={event => setLocation(event.target.value)}/>un gran recurso para la creación de formularios es: https://react-hook-form.com/