Closed pabloHoc closed 4 years ago
Cuando puedan confirmen que lo leyeron y si les parece bien o tienen alguna duda comentándolo (o con una reacción), así lo cierro y no queda dentro de los pendientes.
Pablo lo lei, pero necesitaría que me aclares en el codigo con un ejemplo de como aplicarlo. Gracias
Dale Jose, te lo muestro con un PR de Flor que viene bien para ejemplificarlo. El código está más o menos así (hay cosas omitidas):
const saveChangesEnter = (event) => {
if (event.key === 'Enter' && todoText.length > 0) {
onUpdateText(id, todoText)
setEditing(false)
}
}
const saveChangesBtn = () => {
if (todoText.length > 0) {
onUpdateText(id, todoText)
setEditing(false)
}
}
return (
<Input
onKeyPress={saveChangesEnter}
/>
<Button onClick={saveChangesBtn}>Guardar</Button>
)
Si cambiamos los nombres de los event handlers según a convención nos quedaría así:
const handleKeyPress = (event) => {
if (event.key === 'Enter' && todoText.length > 0) {
onUpdateText(id, todoText)
setEditing(false)
}
}
const handleSaveButtonClick = () => {
if (todoText.length > 0) {
onUpdateText(id, todoText)
setEditing(false)
}
}
return (
<Input
onKeyPress={handleKeyPress}
/>
<Button onClick={handleSaveButtonClick}>Guardar</Button>
)
En este caso, usamos handleSaveButtonClick
porque hay otros eventos de click (que acá no los puse). Ahora en ambos casos tenemos código repetido, por lo que podemos extraerlo en una nueva función:
const finishTodoEdition = () => {
if (todoText.length > 0) {
onUpdateText(id, todoText)
setEditing(false)
}
}
const handleKeyPress = (event) => {
if (event.key === 'Enter') {
finishTodoEdition()
}
}
const handleSaveButtonClick = () => {
finishTodoEdition()
}
return (
<Input
onKeyPress={handleKeyPress}
/>
<Button onClick={handleSaveButtonClick}>Guardar</Button>
)
Por otro lado, en componentes con eventos más "custom", pongamos un todo, tendríamos algo como:
<Todo onUpdateText={handleUpdateText} onDelete={handleDelete} />
En caso (probable) de que luego tengamos varias cosas por eliminar, podríamos definir el sujeto:
<Todo onUpdateText={handleUpdateText} onDelete={handleDeleteTodo} />
Dejo el código visto en clase como ejemplo
// eventListener -> espera a que se detecte un evento para ejecutar el eventHandler
// eventHandler -> Callback que ejecutar el eventListener
// onClick={handleOnClick}
// onClick -> eventListener -> "escucha" a los clicks sobre el componente
// handleOnclick -> eventHandler -> "maneja" las acciones que se ejecutan luego del evento
// onEvent
// onSubjectEvent -> ser más específicos
// onClick
// onButtonClick
// handleEvent
// handleSubjectEvent
// handleClick
// handleButtonClick
<Todo
onTitleEdit={handleTodoTitleEdit}
onCommentEdit={handleTodoCommentEdit}
/>
const Todo = () => {
const editTodo = () => {
setTodo('hola')
}
const handleKeyPress = () => {
editTodo()
}
const handleEditButtonClick = () => {
editTodo()
}
return (
<>
<Input onKeyPress={handleKeyPress} />
<Button onClick={handleEditButtonClick}>Editar</Button>
<Button onClick={handleDeleteButtonClick}>Borrar</Button>
</>
)
}
Descripción de la situación
Para evitar futuros conflictos y tener una convención que nos evite tener que estar pensando buenos nombres, a la hora de definir props que sean eventos y necesiten de un callback, vamos a usar lo siguiente:
Convención
onEvent
onSubjectEvent
es decir, el prefijo
on-
más el nombre del evento, y en caso de que sea necesario, sobre qué se hace el evento (por ejemplo, cuando hay dos eventos iguales sobre distintos componentes).Ejemplos
onClick
onDeleteIconClick
onTextInputChange
onEditIconClick
Las funciones que actúen como callbacks de dichos eventos (los event handlers) se escriben:
Convención
handleEvent
handleSubjectEvent
de la misma manera que los eventos, excepto que utilizan el prefijo
handle-
Ejemplos
handleClick
handleDeleteIconClick
handleTextInputChange
handleEditIconClick
Otras situaciones
Cuando un handler necesita invocar a otro handler (para no repetir código), se extrae en una nueva función el código que se necesita y se la invoca desde ambos handlers. Nunca se invoca un handler desde otro.