Componentes comunes (p. ej. <div>)
Todos los componentes integrados, como <div>
, admiten algunas props y eventos comunes.
- Referencia
- Componentes comunes (p. ej.
<div>
) - Función callback
ref
- Objeto de evento de React
- función controladora de evento
AnimationEvent
- función controladora de evento
ClipboardEvent
- función controladora de evento
CompositionEvent
- función controladora de evento
DragEvent
- función controladora de evento
FocusEvent
- función controladora de evento
Event
- función controladora de evento
InputEvent
- función controladora de evento
KeyboardEvent
- función controladora de evento
MouseEvent
- función controladora de evento
PointerEvent
- función controladora de evento
TouchEvent
- función controladora de evento
TransitionEvent
- función controladora de evento
UIEvent
- función controladora de evento
WheelEvent
- Componentes comunes (p. ej.
- Uso
Referencia
Componentes comunes (p. ej. <div>
)
<div className="wrapper">Algún contenido</div>
Props
Estas props especiales de React son compatibles con todos los componentes integrados:
-
children
: Un nodo de React (un elemento, un string, un número, un portal, un nodo vacío comonull
,undefined
y booleanos, o un array de otros nodos de React). Especifica el contenido dentro del componente. Cuando usas JSX, por lo general especificarás la propchildren
implícitamente mediante la anidación de etiquetas como<div><span /></div>
. -
dangerouslySetInnerHTML
: Un objeto de la forma{ __html: '<p>some html</p>' }
con un string HTML sin procesar dentro. Anula la propiedadinnerHTML
del nodo del DOM y muestra el HTML pasado en el interior. Debe usarse con extrema precaución. Si el HTML no es de confianza (por ejemplo, si se basa en datos de usuario), se corre el riesgo de introducir una vulnerabilidad XSS. Lee más sobre cómo utilizardangerouslySetInnerHTML
. -
ref
: Un objeto ref deuseRef
ocreateRef
, o una función callbackref
, o un string para antiguas refs. Tu ref se llenará con el elemento DOM para este nodo. Lee más sobre cómo manipular el DOM con refs. -
suppressContentEditableWarning
: Un booleano. Si estrue
, suprime la advertencia que React muestra para los elementos que tienen tantochildren
comocontentEditable={true}
(que normalmente no funcionan juntos). Úsalo si estás construyendo una biblioteca de entrada de texto que gestiona el contenidocontentEditable
manualmente. -
suppressHydrationWarning
: Un booleano. Si usas renderizado en el servidor, normalmente hay una advertencia cuando el servidor y el cliente renderizan un contenido diferente. En algunos casos extraños (como marcas de tiempo), es muy difícil o incluso imposible garantizar una concidencia exacta. Si establecessuppressHydrationWarning
entrue
, React no te advertirá sobre las inconsistencias en los atributos y el contenido de este elemento. Sólo funciona a un nivel de profundidad, y está destinado a ser utilizado como una salida de emergencia. No lo uses en exceso. Lee más sobre cómo suprimir errores de hidratación. -
style
: Un objeto con estilos CSS, por ejemplo{ fontWeight: 'bold', margin: 20 }
. Al igual que la propiedadstyle
del DOM, los nombres de las propiedades CSS deben escribirse en camelCase, por ejemplofontWeight
en lugar defont-weight
. Puedes pasar strings o números como valores. Si pasas un número, comowidth: 100
, React automáticamente agregarápx
(«píxeles») al valor a menos que sea una propiedad sin unidades. Se recomienda usarstyle
sólo para estilos dinámicos donde no se conocen los valores de estilo de antemano. En otros casos, aplicar clases clases CSS simples conclassName
es más eficiente. Lee más sobreclassName
ystyle
.
Estas propiedades DOM estándar también son compatibles con todos los componentes integrados:
accessKey
: Un string. Especifica un acceso directo del teclado para el elemento. Generalmente no se recomienda.aria-*
: Los atributos ARIA te permiten especificar la información del árbol de accesibilidad para este elemento. Consulta atributos ARIA para obtener una referencia completa. En React, todos los nombres de atributos ARIA son exactamente iguales que en HTML.autoCapitalize
: Un string. Especifica si la entrada de texto que escribe el usuario se escribe en mayúsculas y cómo.className
: Un string. Especifica el nombre de la clase CSS del elemento. Lee más sobre cómo aplicar estilos de CSS.contentEditable
: Un booleano. Si estrue
, el navegador permite al usuario editar directamente el elemento renderizado. Esto se utiliza para implementar bibliotecas de entrada de texto enriquecido como Lexical. React advierte si intentas pasarchildren
a un elemento concontentEditable={true}
porque React no podrá actualizar su contenido después de que el usuario lo edite.data-*
: Los atributos de datos permiten adjuntar algún dato tipo string, por ejemplodata-fruit="banana"
. En React, comúnmente no se utilizan porque generalmente se leen datos de props o del estado en su lugar.dir
:'ltr'
or'rtl'
. Especifica la dirección de texto del elemento.draggable
: Un booleano. Especifica si el elemento puede ser arrastrado. Lee más sobre la API de arrastrar y soltar de HTML.enterKeyHint
: Un string. Especifica qué acción presentar para la tecla Enter de los teclados virtuales.htmlFor
: Un string. Para<label>
y<output>
, permite asociar la etiqueta con algún control. Lo mismo para el atributo HTMLfor
. React utiliza los nombres de propiedades DOM estándar (htmlFor
) en lugar de los nombres de los atributos HTML.hidden
: Un booleano o un string. Especifica si el elemento debe estar oculto.id
: Un string. Especifica un identificador único para este elemento, el cual puede ser usado para encontrarlo después o conectarlo con otros elementos. Genéralo conuseId
para evitar conflictos entre varias instancias del mismo componente.is
: Un string. Si se especifica, el componente se comportará como un elemento personalizado.inputMode
: Un string. Especifica qué tipo de teclado mostrar (por ejemplo, texto, número o teléfono).itemProp
: Un string. Especifica cuál propiedad representa el elemento para los rastreadores de datos estructurados.lang
: Un string. Especifica el idioma del elemento.onAnimationEnd
: Una función controladora de eventoAnimationEvent
. Se dispara cuando una animación de CSS se completa.onAnimationEndCapture
: Una versión deonAnimationEnd
que se dispara en la fase de captura.onAnimationIteration
: Una función controladora de eventoAnimationEvent
. Se dispara cuando una iteración de una animación de CSS termina y comienza otra.onAnimationIterationCapture
: Una versión deonAnimationIteration
que se dispara en la fase de capturaonAnimationStart
: Una función controladora de eventoAnimationEvent
. Se dispara cuando una animación de CSS comienza.onAnimationStartCapture
:onAnimationStart
, pero se dispara en la fase de captura.onAuxClick
: Una función controladora de eventoMouseEvent
. Se dispara cuando se hace clic en un botón no primario.onAuxClickCapture
: Una versión deonAuxClick
que se dispara en la fase de captura.onBeforeInput
: Una función controladora de eventoInputEvent
. Se dispara antes de que se modifique el valor de un elemento editable. React aún no utiliza el evento nativobeforeinput
, sino que intenta emularlo utilizando otros eventos.onBeforeInputCapture
: Una versión deonBeforeInput
que se dispara en la fase de captura.onBlur
: Una función controladora de eventoFocusEvent
. Se dispara cuando un elemento pierde el foco. A diferencia del eventoblur
integrado en el navegador, en React, el eventoonBlur
se propaga.onBlurCapture
: Una versión deonBlur
que se dispara en la fase de captura.onClick
: Una función controladora de eventoMouseEvent
. Se dispara cuando se hace clic en el botón principal del dispositivo señalador.onClickCapture
: Una versión deonClick
que se dispara en la fase de captura.onCompositionStart
: Una función controladora de eventoCompositionEvent
. Se dispara cuando un editor de método de entrada comienza una nueva sesión de composición.onCompositionStartCapture
: Una versión deonCompositionStart
que se dispara en la fase de captura.onCompositionEnd
: Una función controladora de eventoCompositionEvent
. Se dispara cuando un editor de métodos de entrada completa o cancela una sesión de composición.onCompositionEndCapture
: Una versión deonCompositionEnd
que se dispara en la fase de captura.onCompositionUpdate
: Una función controladora de eventoCompositionEvent
. Se dispara cuando un editor de métodos de entrada recibe un nuevo carácter.onCompositionUpdateCapture
: Una versión deonCompositionUpdate
que se dispara en la fase de captura.onContextMenu
: Una función controladora de eventoMouseEvent
. Se dispara cuando el usuario intenta abrir un menú contextual.onContextMenuCapture
: Una versión deonContextMenu
que se dispara en la fase de captura.onCopy
: Una función controladora de eventoClipboardEvent
. Se dispara cuando el usuario intenta copiar algo en el portapapeles.onCopyCapture
: Una versión deonCopy
que se dispara en la fase de captura.onCut
: Una función controladora de eventoClipboardEvent
. Se dispara cuando el usuario intenta cortar algo en el cortapapeles.onCutCapture
: Una versión deonCut
que se dispara en la fase de captura.onDoubleClick
: Una función controladora de eventoMouseEvent
. Se dispara cuando el usuario hace doble click. Corresponde al eventodblclick
del navegador.onDoubleClickCapture
: Una versión deonDoubleClick
que se dispara en la fase de captura.onDrag
: Una función controladora de eventoDragEvent
. Se dispara mientras el usuario arrastra algo.onDragCapture
: Una versión deonDrag
que se dispara en la fase de captura.onDragEnd
: Una función controladora de eventoDragEvent
. Se dispara cuando el usuario deja de arrastrar algo.onDragEndCapture
: Una versión deonDragEnd
que se dispara en la fase de captura.onDragEnter
: Una función controladora de eventoDragEvent
. Se dispara cuando el contenido arrastrado entra en un objetivo válido para soltarlo.onDragEnterCapture
: Una versión deonDragEnter
que se dispara en la fase de captura.onDragOver
: Una función controladora de eventoDragEvent
. Se dispara en un objetivo de soltar válido mientras el contenido arrastrado está sobre él. Debes llamare.preventDefault()
aquí para permitir soltar.onDragOverCapture
: Una versión deonDragOver
que se dispara en la fase de captura.onDragStart
: Una función controladora de eventoDragEvent
. Se dispara cuando el usuario comienza a arrastrar un elemento.onDragStartCapture
: Una versión deonDragStart
que se dispara en la fase de captura.onDrop
: Una función controladora de eventoDragEvent
. Se dispara cuando se suelta algo en un objetivo de soltar válido.onDropCapture
: Una versión deonDrop
que se dispara en la fase de captura.onFocus
: AFocusEvent
. Se dispara cuando un elemento recibe el foco. A diferencia del evento defocus
integrado del navegador, en React el eventoonFocus
se propaga.onFocusCapture
: Una versión deonFocus
que se dispara en la fase de captura.onGotPointerCapture
: Una función controladora de eventoPointerEvent
. Se dispara cuando un elemento captura un puntero.onGotPointerCaptureCapture
: Una versión deonGotPointerCapture
que se dispara en la fase de captura.onKeyDown
: Una función controladora de eventoKeyboardEvent
. Se dispara cuando una tecla es presionada.onKeyDownCapture
: Una versión deonKeyDown
que se dispara en la fase de captura.onKeyPress
: Una función controladora de eventoKeyboardEvent
. Obsoleta. En su lugar, usaonKeyDown
oonBeforeInput
.onKeyPressCapture
: Una versión deonKeyPress
que se dispara en la fase de captura.onKeyUp
: Una función controladora de eventoKeyboardEvent
. Se dispara cuando se suelta una tecla.onKeyUpCapture
: Una versión deonKeyUp
que se dispara en la fase de captura.onLostPointerCapture
: Una función controladora de eventoPointerEvent
. Se dispara cuando un elemento deja de capturar un puntero.onLostPointerCaptureCapture
: Una versión deonLostPointerCapture
que se dispara en la fase de captura.onMouseDown
: Una función controladora de eventoMouseEvent
. Se dispara cuando el puntero se presiona.onMouseDownCapture
: Una versión deonMouseDown
que se dispara en la fase de captura.onMouseEnter
: Una función controladora de eventoMouseEvent
. Se dispara cuando el puntero se mueve dentro de un elemento. No tiene una fase de captura. ,onMouseLeave
yonMouseEnter
se propagan desde el elemento que se deja al que se ingresa.onMouseLeave
: Una función controladora de eventoMouseEvent
. Se dispara cuando el puntero se mueve fuera de un elemento. No tiene una fase de captura. En su lugar,onMouseLeave
yonMouseEnter
se propagan desde el elemento que se deja al que se ingresa.onMouseMove
: Una función controladora de eventoMouseEvent
. Se dispara cuando el puntero cambia de coordenadas.onMouseMoveCapture
: Una versión deonMouseMove
que se dispara en la fase de captura.onMouseOut
: Una función controladora de eventoMouseEvent
. Se dispara cuando el puntero se mueve fuera de un elemento, o si se mueve a un elemento hijo.onMouseOutCapture
: Una versión deonMouseOut
que se dispara en la fase de captura.onMouseUp
: Una función controladora de eventoMouseEvent
. Se dispara cuando se suelta el puntero.onMouseUpCapture
: Una versión deonMouseUp
que se dispara en la fase de captura.onPointerCancel
: Una función controladora de eventoPointerEvent
. Se dispara cuando el navegador cancela una interacción de puntero.onPointerCancelCapture
: Una versión deonPointerCancel
que se dispara en la fase de captura.onPointerDown
: Una función controladora de eventoPointerEvent
. Se dispara cuando el puntero se vuelve activo.onPointerDownCapture
: Una versión deonPointerDown
que se dispara en la fase de captura.onPointerEnter
: Una función controladora de eventoPointerEvent
. Se dispara cuando un cursor se mueve dentro de un elemento. No tiene una fase de captura. En su lugar,onPointerLeave
yonPointerEnter
se propagan desde el elemento que se deja al que se ingresa.onPointerLeave
: Una función controladora de eventoPointerEvent
. Se dispara cuando un puntero se mueve fuera de un elemento. No tiene una fase de captura. En su lugar,onPointerLeave
yonPointerEnter
se propagan desde el elemento que se deja al que se ingresa.onPointerMove
: Una función controladora de eventoPointerEvent
. Se dispara cuando un puntero cambia de coordenadas.onPointerMoveCapture
: Una versión deonPointerMove
que se dispara en la fase de captura.onPointerOut
: Una función controladora de eventoPointerEvent
. Se dispara cuando un puntero se mueve fuera de un elemento, si la interacción del puntero es cancelada, y por algunas otras razones.onPointerOutCapture
: Una versión deonPointerOut
que se dispara en la fase de captura.onPointerUp
: Una función controladora de eventoPointerEvent
. Se dispara cuando un puntero ya no está activo.onPointerUpCapture
: Una versión deonPointerUp
que se dispara en la fase de captura.onPaste
: Una función controladora de eventoClipboardEvent
. Se dispara cuando el usuario intenta pegar algo desde el portapapeles.onPasteCapture
: Una versión deonPaste
que se dispara en la fase de captura.onScroll
: Una función controladora de eventoEvent
. Se dispara cuando se ha desplazado un elemento. Este evento no se propaga.onScrollCapture
: Una versión deonScroll
que se dispara en la fase de captura.onSelect
: Una función controladora de eventoEvent
. Se dispara después de que la selección dentro de un elemento editable, como un input, cambia. React extiende el eventoonSelect
para que funcione también en elementos concontentEditable={true}
. Además, React lo extiende para que se active cuando la selección esté vacía y en ediciones (que pueden afectar la selección).onSelectCapture
: Una versión deonSelect
que se dispara en la fase de captura.onTouchCancel
: Una función controladora de eventoTouchEvent
. Se dispara cuando el navegador cancela una interacción táctil.onTouchCancelCapture
: Una versión deonTouchCancel
que se dispara en la fase de captura.onTouchEnd
: Una función controladora de eventoTouchEvent
. Se dispara cuando se quitan uno o más puntos táctiles.onTouchEndCapture
: Una versión deonTouchEnd
que se dispara en la fase de captura.onTouchMove
: Una función controladora de eventoTouchEvent
. Se dispara cuando se mueven uno o más puntos táctiles.onTouchMoveCapture
: Una versión deonTouchMove
que se dispara en la fase de captura.onTouchStart
: Una función controladora de eventoTouchEvent
. Se dispara cuando se colocan uno más puntos táctilesonTouchStartCapture
: Una versión deonTouchStart
que se dispara en la fase de captura.onTransitionEnd
: Una función controladora de eventoTransitionEvent
. Se dispara cuando se completa una transición de CSS.onTransitionEndCapture
: Una versión deonTransitionEnd
que se dispara en la fase de captura.onWheel
: Una función controladora de eventoWheelEvent
. Se dispara cuando el usuario gira un botón de rueda en un dispositivo señalador.onWheelCapture
: Una versión deonWheel
que se dispara en la fase de captura.role
: Un string. Especifica el rol del elemento explícitamente para las tecnologías de asistencia.slot
: Un string. Especifica el nombre del slot cuando se utiliza shadow DOM. En React, normalmente se logra un patrón equivalente al pasar JSX como props, por ejemplo<Layout left={<Sidebar />} right={<Content />} />
.spellCheck
: Un booleano onull
. Si explícitamente se establece entrue
ofalse
, habilita o deshabilita la corrección ortográfica.tabIndex
: Un número. Anula el comportamiento por defecto del botón Tab. Evita utilizar valores distintos de -1 y 0.title
: Un string. Especifica el texto de información de ayuda para el elemento.translate
: Ya sea'yes'
o'no'
. Pasar'no'
excluye el contenido del elemento de ser traducido.
También puedes pasar atributos personalizados como props, por ejemplo mycustomprop="someValue"
. Esto puede ser útil al integrar bibliotecas de terceros. El nombre del atributo personalizado debe estar en minúsculas y no debe empezar con on
. El valor se convertirá a un string. Si pasas null
o undefined
, se eliminará el atributo personalizado.
Estos eventos se disparan sólo para los elementos <form>
:
onReset
: Una función controladora de eventoEvent
. Se dispara cuando se reinicia un formulario.onResetCapture
: Una versión deonReset
que se dispara en la fase de captura.onSubmit
: Una función controladora de eventoEvent
. Se dispara cuando se envía un formulario.onSubmitCapture
: Una versión deonSubmit
que se dispara en la fase de captura.
Estos eventos se disparan sólo para los elementos <dialog>
. A diferencia de los eventos del navegador, se propagan en React:
onCancel
: Una función controladora de eventoEvent
. Se dispara cuando el usuario intenta cerrar el diálogo.onCancelCapture
: Una versión deonCancel
que se dispara en la fase de captura.onClose
: Una función controladora de eventoEvent
. Se dispara cuando un diálogo ha sido cerrado.onCloseCapture
: Una versión deonClose
que se dispara en la fase de captura.
Estos eventos sólo se disparan para los elementos <details>
. A diferencia de los eventos del navegador, se propagan en React:
onToggle
: Una función controladora de eventoEvent
. Se dispara cuando el usuario cambia el estado de los detalles.onToggleCapture
: Una versión deonToggle
que se dispara en la fase de captura.
Estos eventos se disparan para los elementos <img>
, <iframe>
, <object>
, <embed>
, <link>
, and SVG <image>
. A diferencia de los eventos del navegador, se propagan en React:
onLoad
: Una función controladora de eventoEvent
. Se dispara cuando el recurso ha sido cargado.onLoadCapture
: Una versión deonLoad
que se dispara en la fase de captura.onError
: Una función controladora de eventoEvent
. Se dispara cuando el recurso no se ha podido cargar.onErrorCapture
: Una versión deonError
que se dispara en la fase de captura.
Estos eventos se disparan para recursos como <audio>
y <video>
. A diferencia de los eventos del navegador, se propagan en React:
onAbort
: Una función controladora de eventoEvent
. Se dispara cuando el recurso no se ha cargado completamente, pero no debido a un error.onAbortCapture
: Una versión deonAbort
que se dispara en la fase de captura.onCanPlay
: Una función controladora de eventoEvent
. Se dispara cuando hay suficientes datos para empezar a reproducir, pero no los suficientes para reproducir hasta el final sin búfer.onCanPlayCapture
: Una versión deonCanPlay
que se dispara en la fase de captura.onCanPlayThrough
: Una función controladora de eventoEvent
. Se dispara cuando hay suficientes datos y es posible empezar a reproducir sin búfer hasta el final.onCanPlayThroughCapture
: Una versión deonCanPlayThrough
que se dispara en la fase de captura.onDurationChange
: Una función controladora de eventoEvent
. Se dispara cuando la duración del archivo multimedia ha sido actualizada.onDurationChangeCapture
: Una versión deonDurationChange
que se dispara en la fase de captura.onEmptied
: Una función controladora de eventoEvent
. Se dispara cuando el recurso multimedia se ha quedado vacío.onEmptiedCapture
: Una versión deonEmptied
que se dispara en la fase de captura.onEncrypted
: Una función controladora de eventoEvent
. Se dispara cuando el navegador encuentra contenido multimedia encriptado.onEncryptedCapture
: Una versión deonEncrypted
que se dispara en la fase de captura.onEnded
: Una función controladora de eventoEvent
. Se dispara cuando la reproducción se detiene porque no hay nada más que reproducir.onEndedCapture
: Una versión deonEnded
que se dispara en la fase de captura.onError
: Una función controladora de eventoEvent
function. Se dispara cuando no se ha podido cargar el recurso.onErrorCapture
: Una versión deonError
que se dispara en la fase de captura.onLoadedData
: Una función controladora de eventoEvent
. Se dispara cuando el marco de reproducción actual se ha cargado.onLoadedDataCapture
: Una versión deonLoadedData
que se dispara en la fase de captura.onLoadedMetadata
: Una función controladora de eventoEvent
. Se dispara cuando se han cargado los metadatos.onLoadedMetadataCapture
: Una versión deonLoadedMetadata
que se dispara en la fase de captura.onLoadStart
: Una función controladora de eventoEvent
. Se dispara cuando el navegador ha comenzado a cargar el recurso.onLoadStartCapture
: Una versión deonLoadStart
que se dispara en la fase de captura.onPause
: Una función controladora de eventoEvent
. Se dispara cuando se ha pausado el recurso multimedia.onPauseCapture
: Una versión deonPause
que se dispara en la fase de captura.onPlay
: Una función controladora de eventoEvent
. Se dispara cuando se ha reanudado la reproducción del recurso multimedia.onPlayCapture
: Una versión deonPlay
que se dispara en la fase de captura.onPlaying
: Una función controladora de eventoEvent
. Se dispara cuando el archivo multimedia comienza o reinicia la reproducción.onPlayingCapture
: Una versión deonPlaying
que se dispara en la fase de captura.onProgress
: Una función controladora de eventoEvent
. Se dispara periódicamente mientras se está cargando el recurso.onProgressCapture
: Una versión deonProgress
que se dispara en la fase de captura.onRateChange
: Una función controladora de eventoEvent
. Se dispara cuando la velocidad de reproducción cambia.onRateChangeCapture
: Una versión deonRateChange
que se dispara en la fase de captura.onResize
: Una función controladora de eventoEvent
. Se activa cuando cambia el tamaño del video.onResizeCapture
: Una versión deonResize
que se dispara en la fase de captura.onSeeked
: Una función controladora de eventoEvent
. Se dispara cuando se completa una operación de búsqueda.onSeekedCapture
: Una versión deonSeeked
que se dispara en la fase de captura.onSeeking
: Una función controladora de eventoEvent
. Se dispara cuando comienza una operación de búsqueda.onSeekingCapture
: Una versión deonSeeking
que se dispara en la fase de captura.onStalled
: Una función controladora de eventoEvent
. Se dispara cuando el navegador está esperando datos pero no los carga.onStalledCapture
: Una versión deonStalled
que se dispara en la fase de captura.onSuspend
: Una función controladora de eventoEvent
. Se dispara cuando la carga del recurso se ha suspendido.onSuspendCapture
: Una versión deonSuspend
que se dispara en la fase de captura.onTimeUpdate
: Una función controladora de eventoEvent
. Se dispara cuando el tiempo actual de la reproducción se actualiza.onTimeUpdateCapture
: Una versión deonTimeUpdate
que se dispara en la fase de captura.onVolumeChange
: Una función controladora de eventoEvent
. Se dispara cuando el volumen ha cambiado.onVolumeChangeCapture
: Una versión deonVolumeChange
que se dispara en la fase de captura.onWaiting
: Una función controladora de eventoEvent
. Se dispara cuando la reproducción se detuvo debido a la falta temporal de datos.onWaitingCapture
: Una versión deonWaiting
que se dispara en la fase de captura.
Advertencias
- No puedes pasar tanto
children
comodangerouslySetInnerHTML
al mismo tiempo. - Algunos eventos (como
onAbort
yonLoad
) no se propagan en el navegador, pero sí en React.
Función callback ref
En lugar de un objeto ref (como el devuelto por useRef
), puedes pasar una función al atributo ref
.
<div ref={(node) => console.log(node)} />
Vea un ejemplo de la función callback ref
.
Cuando el nodo del DOM <div>
es agregado a la pantalla, React llamará a tu callback ref
con el nodo del DOM como argumento. Cuando ese nodo del DOM <div>
se elimina, React llamará a tu callback ref
con null
.
React también llamará a tu callback ref
cada vez que pases un callback ref
diferente. En el ejemplo anterior, (node) => { ... }
es una función diferente en cada renderizado. Cuando tu componente se vuelva a renderizar, la función anterior será llamada con null
como argumento, y la siguiente función será llamada con el nodo del DOM.
Parámetros
node
: Un nodo del DOM onull
. React te pasará el nodo del DOM cuando se vincule la ref, ynull
cuando la ref se desvincule. A menos que pases la misma función ref para el callbackref
en cada renderizado, el callback se desprenderá temporalmente y se volverá a vincular durante cada renderizado del componente.
Objeto de evento de React
Los controladores de eventos recibirán un objeto de evento de React. A veces también se le conoce como un «evento sintético».
<button onClick={e => {
console.log(e); // Objeto de evento de React
}} />
Cumple con el mismo estándar que los eventos DOM subyacentes, pero soluciona algunas inconsistencia del navegador.
Algunos eventos de React no se asignan directamente a los eventos nativos del navegador. Por ejemplo en onMouseLeave
, e.nativeEvent
apuntará a un evento mouseout
. La asignación específica no forma parte de la API pública y puede cambiar en el futuro. Si necesitas el evento del navegador subyacente por alguna razón, léelo desde e.nativeEvent
.
Propiedades
Los objetos de evento de React implementan algunas de las propiedades estándar de Evento
:
bubbles
: Un booleano. Devuelve si el evento se propaga a través del DOM.cancelable
: Un booleano. Devuelve si el evento se puede cancelar.currentTarget
: Un nodo del DOM. Devuelve el nodo al que se vincula el controlador de evento actual en el árbol de React.defaultPrevented
: Un booleano. Devuelve si se llamó apreventDefault
.eventPhase
: Un número. Devuelve en qué fase se encuentra el evento actualmente.isTrusted
: Un booleano. Devuelve si el evento fue iniciado por el usuario.target
: Un nodo del DOM. Devuelve el nodo en el que ha ocurrido el evento (que podría ser un hijo distante)timeStamp
: Un número. Devuelve la hora (en milisegundos) en la que ocurrió el evento.
Además, los objetos de evento de React proporcionan estas propiedades:
nativeEvent
: UnEvento
del DOM. El objeto de evento original del navegador.
Métodos
Los objetos de evento de React implementan algunos de los métodos estándar de Evento
:
preventDefault()
: Evita la acción del navegador predeterminada para el evento.stopPropagation()
: Detiene la propagación del evento a través del árbol de React.
Además, los objetos de evento de React proporcionan estos métodos:
isDefaultPrevented()
: Devuelve un valor booleano que indica si se llamó apreventDefault
.isPropagationStopped()
: Devuelve un valor booleano que indica si se llamó astopPropagation
.persist()
: No se usa con React DOM. Con React Native, llámalo para leer las propiedades del evento después del evento.isPersistent()
: No se usa con React DOM. Con React Native, devuelve si se ha llamado a persist.
Advertencias
- Los valores de
currentTarget
,eventPhase
,target
, ytype
reflejan los valores que tu código de React espera. Sin embargo, internamente, React vincula los controladores de eventos en la raíz, pero esto no se refleja en los objetos de evento de React. Por ejemplo,e.currentTarget
puede no ser lo mismo que el valor subyacentee.nativeEvent.currentTarget
. Para eventos con polyfills,e.type
(tipo de evento de React) puede ser diferente dee.nativeEvent.type
(tipo subyacente).
función controladora de evento AnimationEvent
Un tipo de controlador de evento para los eventos de animación CSS.
<div
onAnimationStart={e => console.log('onAnimationStart')}
onAnimationIteration={e => console.log('onAnimationIteration')}
onAnimationEnd={e => console.log('onAnimationEnd')}
/>
Parámetros
e
: Un objeto de evento de React con propiedades adicionales deAnimationEvent
:
función controladora de evento ClipboardEvent
Un tipo de controlador de evento para los eventos de Clipboard API.
<input
onCopy={e => console.log('onCopy')}
onCut={e => console.log('onCut')}
onPaste={e => console.log('onPaste')}
/>
Parámetros
-
e
: Un objeto de evento de React con propiedades adicionales deClipboardEvent
:
función controladora de evento CompositionEvent
Un tipo de controlador de evento para los eventos del editor de métodos de entrada.
<input
onCompositionStart={e => console.log('onCompositionStart')}
onCompositionUpdate={e => console.log('onCompositionUpdate')}
onCompositionEnd={e => console.log('onCompositionEnd')}
/>
Parámetros
e
: Un objeto de evento de React con propiedades adicionales deCompositionEvent
:
función controladora de evento DragEvent
Un tipo de controlador de evento para los eventos de la API de arrastrar y soltar de HTML.
<>
<div
draggable={true}
onDragStart={e => console.log('onDragStart')}
onDragEnd={e => console.log('onDragEnd')}
>
Fuente de arrastre
</div>
<div
onDragEnter={e => console.log('onDragEnter')}
onDragLeave={e => console.log('onDragLeave')}
onDragOver={e => { e.preventDefault(); console.log('onDragOver'); }}
onDrop={e => console.log('onDrop')}
>
Área de destino
</div>
</>
Parámetros
-
e
: Un objeto de evento de React con propiedades adicionales deDragEvent
:También incluye las propiedades heredadas de
MouseEvent
:altKey
button
buttons
ctrlKey
clientX
clientY
getModifierState(key)
metaKey
movementX
movementY
pageX
pageY
relatedTarget
screenX
screenY
shiftKey
También incluye las propiedades heredadas de
UIEvent
:
función controladora de evento FocusEvent
Un tipo de controlador de evento para los eventos de foco.
<input
onFocus={e => console.log('onFocus')}
onBlur={e => console.log('onBlur')}
/>
Parámetros
-
e
: Un objeto de evento de React con propiedades adicionales deFocusEvent
:También incluye las propiedades heredadas de
UIEvent
:
función controladora de evento Event
Un tipo de función controladora de evento genéricos.
Parámetros
e
: Un objeto de evento de React sin propiedades adicionales.
función controladora de evento InputEvent
Un tipo de controlador de evento para el evento onBeforeInput
.
<input onBeforeInput={e => console.log('onBeforeInput')} />
Parámetros
e
: Un objeto de evento de React con propiedades adicionales deInputEvent
:
función controladora de evento KeyboardEvent
Un tipo de controlador de evento para eventos de teclado.
<input
onKeyDown={e => console.log('onKeyDown')}
onKeyUp={e => console.log('onKeyUp')}
/>
Parámetros
-
e
: Un objeto de evento de React con propiedades adicionales deKeyboardEvent
:altKey
charCode
code
ctrlKey
getModifierState(key)
key
keyCode
locale
metaKey
location
repeat
shiftKey
which
También incluye las propiedades heredadas de
UIEvent
:
función controladora de evento MouseEvent
Un tipo de controlador de evento para eventos del mouse.
<div
onClick={e => console.log('onClick')}
onMouseEnter={e => console.log('onMouseEnter')}
onMouseOver={e => console.log('onMouseOver')}
onMouseDown={e => console.log('onMouseDown')}
onMouseUp={e => console.log('onMouseUp')}
onMouseLeave={e => console.log('onMouseLeave')}
/>
Parámetros
-
e
: Un objeto de evento de React con propiedades adicionales deMouseEvent
:altKey
button
buttons
ctrlKey
clientX
clientY
getModifierState(key)
metaKey
movementX
movementY
pageX
pageY
relatedTarget
screenX
screenY
shiftKey
También incluye las propiedades heredadas de
UIEvent
:
función controladora de evento PointerEvent
Un tipo de controlador de evento para eventos del puntero.
<div
onPointerEnter={e => console.log('onPointerEnter')}
onPointerMove={e => console.log('onPointerMove')}
onPointerDown={e => console.log('onPointerDown')}
onPointerUp={e => console.log('onPointerUp')}
onPointerLeave={e => console.log('onPointerLeave')}
/>
Parámetros
-
e
: Un objeto de evento de React con propiedades adicionales dePointerEvent
:También incluye las propiedades heredadas de
MouseEvent
:altKey
button
buttons
ctrlKey
clientX
clientY
getModifierState(key)
metaKey
movementX
movementY
pageX
pageY
relatedTarget
screenX
screenY
shiftKey
También incluye las propiedades heredadas de
UIEvent
:
función controladora de evento TouchEvent
Un tipo de controlador de evento para eventos táctiles.
<div
onTouchStart={e => console.log('onTouchStart')}
onTouchMove={e => console.log('onTouchMove')}
onTouchEnd={e => console.log('onTouchEnd')}
onTouchCancel={e => console.log('onTouchCancel')}
/>
Parámetros
-
e
: Un objeto de evento de React con propiedades adicionales deTouchEvent
:También incluye las propiedades heredadas de
UIEvent
:
función controladora de evento TransitionEvent
Un tipo de controlador de evento para los eventos de transición CSS.
<div
onTransitionEnd={e => console.log('onTransitionEnd')}
/>
Parámetros
e
: Un objeto de evento de React con propiedades adicionales deTransitionEvent
:
función controladora de evento UIEvent
Un tipo de controlador de evento para eventos de UI genéricos.
<div
onScroll={e => console.log('onScroll')}
/>
Parámetros
e
: Un objeto de evento de React con propiedades adicionales deUIEvent
:
función controladora de evento WheelEvent
Un tipo de controlador de evento para el evento onWheel
.
<div
onWheel={e => console.log('onWheel')}
/>
Parámetros
-
e
: Un objeto de evento de React con propiedades adicionales deWheelEvent
:También incluye las propiedades heredadas de
MouseEvent
:altKey
button
buttons
ctrlKey
clientX
clientY
getModifierState(key)
metaKey
movementX
movementY
pageX
pageY
relatedTarget
screenX
screenY
shiftKey
También incluye las propiedades heredadas de
UIEvent
:
Uso
Aplicar estilos CSS
En React, se especifica una clase de CSS con className
. Funciona como el atributo class
en HTML:
<img className="avatar" />
Luego, se escriben las reglas CSS para dicha clase en un archivo CSS separado.
/* En tu archivo CSS */
.avatar {
border-radius: 50%;
}
React no indica cómo agregar archivos CSS. En el caso más simple, añadirás una etiqueta <link>
en el HTML. Si usas un framework o alguna herramienta de compilación, consulta su documentación para aprender cómo añadir un archivo CSS a tu proyecto.
A veces, los valores de estilo dependen de los datos. Usa el atributo style
para pasar algunos estilos dinámicamente:
<img
className="avatar"
style={{
width: user.imageSize,
height: user.imageSize
}}
/>
En el ejemplo anterior, style={{}}
no es una sintaxis especial, sino un objeto {}
regular dentro de las llaves JSX style={ }
. Recomendamos utilizar el atributo style
sólo cuando los estilos dependen de variables JavaScript.
export default function Avatar({ user }) { return ( <img src={user.imageUrl} alt={'Photo of ' + user.name} className="avatar" style={{ width: user.imageSize, height: user.imageSize }} /> ); }
Profundizar
Para aplicar clases de CSS de forma condicional, necesitas producir el string de className
tú mismo utilizando JavaScript.
Por ejemplo, className={'row ' + (isSelected ? 'selected': '')}
producirá ya sea className="row"
o className="row selected"
dependiendo de si isSelected
es true
.
Para hacer esto más legible, puedes usar una pequeña biblioteca de ayuda como classnames
:
import cn from 'classnames';
function Row({ isSelected }) {
return (
<div className={cn('row', isSelected && 'selected')}>
...
</div>
);
}
Es conveniente si tienes múltiples clases condicionales:
import cn from 'classnames';
function Row({ isSelected, size }) {
return (
<div className={cn('row', {
selected: isSelected,
large: size === 'large',
small: size === 'small',
})}>
...
</div>
);
}
Manipular un nodo del DOM con una ref
A veces, necesitarás obtener el nodo del DOM del navegador asociado con una etiqueta en JSX. Por ejemplo, si quieres enfocar un <input>
cuando se hace clic en un botón, necesitas llamar a focus()
en el nodo del DOM <input>
del navegador.
Para obtener el nodo del DOM del navegador de una etiqueta, declara una ref y pásala como el atributo ref a esa etiqueta:
import { useRef } from 'react';
export default function Form() {
const inputRef = useRef(null);
// ...
return (
<input ref={inputRef} />
// ...
React pondrá el nodo del DOM en inputRef.current
después de que haya sido renderizado en la pantalla.
import { useRef } from 'react'; export default function Form() { const inputRef = useRef(null); function handleClick() { inputRef.current.focus(); } return ( <> <input ref={inputRef} /> <button onClick={handleClick}> Focus the input </button> </> ); }
Lee más sobre cómo manipular el DOM con refs y consulta más ejemplos.
Para casos de uso más avanzados, el atributo ref también acepta una función callback.
dangerouslySetInnerHTML
Puedes pasar un string HTML sin procesar a un elemento de esta manera:
const markup = { __html: '<p>some raw html</p>' };
return <div dangerouslySetInnerHTML={markup} />;
Esto es peligroso. Al igual que con la propiedad subyacente del DOM innerHTML
, debes tener precaución extrema! A menos que el markup venga de una fuente completamente confiable, se podría correr el riesgo de introducir una vulnerabilidad XSS de esta manera.
Por ejemplo, si utilizas una biblioteca de Markdown que convierte Markdown a HTML, debes confiar en que el parser no contenga errores y el usuario sólo vea su propio input, puedes mostrar el HTML resultante de esta manera:
import { Remarkable } from 'remarkable'; const md = new Remarkable(); function renderMarkdownToHTML(markdown) { // Esto SÓLO es seguro porque el HTML resultante // se muestra al mismo usuario y confías en que // este parser de Markdown no tiene errores. const renderedHTML = md.render(markdown); return {__html: renderedHTML}; } export default function MarkdownPreview({ markdown }) { const markup = renderMarkdownToHTML(markdown); return <div dangerouslySetInnerHTML={markup} />; }
El objeto {__html}
debe ser creado tan cerca a donde se genera el HTML como sea posible, como el ejemplo de arriba lo hace en la función renderMarkdownToHTML
. Esto garantiza que todo el HTML sin procesar que se usa en tu código se marque explícitamente como tal, y que solo variables que esperas que contengan HTML se pasen a dangerouslySetInnerHTML
. No se recomienda crear el objeto en línea de esta forma: <div dangerouslySetInnerHTML={{__html: markup}} />
.
Para entender por qué el renderizado arbitrario de HTML es peligroso, reemplaza el código anterior con esto:
const post = {
// // Imagina que este contenido se almacena en la base de datos.
content: `<img src="" onerror='alert("has sido hackeado")'>`
};
export default function MarkdownPreview() {
// 🔴 AGUJERO DE SEGURIDAD: pasando input no confiable a dangerouslySetInnerHTML.
const markup = { __html: post.content };
return <div dangerouslySetInnerHTML={markup} />;
}
El código incrustado en el HTML se ejecutará. Un hacker podría utilizar este agujero de seguridad para robar información de los usuarios o realizar acciones en su nombre. Solo usa dangerouslySetInnerHTML
con datos confiables y sanitizados.
Control de eventos del mouse
Este ejemplo muestra algunos eventos del mouse comunes y cuándo se disparan.
export default function MouseExample() { return ( <div onMouseEnter={e => console.log('onMouseEnter (parent)')} onMouseLeave={e => console.log('onMouseLeave (parent)')} > <button onClick={e => console.log('onClick (first button)')} onMouseDown={e => console.log('onMouseDown (first button)')} onMouseEnter={e => console.log('onMouseEnter (first button)')} onMouseLeave={e => console.log('onMouseLeave (first button)')} onMouseOver={e => console.log('onMouseOver (first button)')} onMouseUp={e => console.log('onMouseUp (first button)')} > First button </button> <button onClick={e => console.log('onClick (second button)')} onMouseDown={e => console.log('onMouseDown (second button)')} onMouseEnter={e => console.log('onMouseEnter (second button)')} onMouseLeave={e => console.log('onMouseLeave (second button)')} onMouseOver={e => console.log('onMouseOver (second button)')} onMouseUp={e => console.log('onMouseUp (second button)')} > Second button </button> </div> ); }
Control de eventos del puntero
Este ejemplo muestra algunos eventos del puntero comunes y cuándo se disparan.
export default function PointerExample() { return ( <div onPointerEnter={e => console.log('onPointerEnter (parent)')} onPointerLeave={e => console.log('onPointerLeave (parent)')} style={{ padding: 20, backgroundColor: '#ddd' }} > <div onPointerDown={e => console.log('onPointerDown (first child)')} onPointerEnter={e => console.log('onPointerEnter (first child)')} onPointerLeave={e => console.log('onPointerLeave (first child)')} onPointerMove={e => console.log('onPointerMove (first child)')} onPointerUp={e => console.log('onPointerUp (first child)')} style={{ padding: 20, backgroundColor: 'lightyellow' }} > First child </div> <div onPointerDown={e => console.log('onPointerDown (second child)')} onPointerEnter={e => console.log('onPointerEnter (second child)')} onPointerLeave={e => console.log('onPointerLeave (second child)')} onPointerMove={e => console.log('onPointerMove (second child)')} onPointerUp={e => console.log('onPointerUp (second child)')} style={{ padding: 20, backgroundColor: 'lightblue' }} > Second child </div> </div> ); }
Control de eventos de foco
En React, los eventos de foco se propagan. Puedes usar el currentTarget
y relatedTarget
para diferenciar si los eventos de enfoque o desenfoque se originaron fuera del elemento padre. El ejemplo muestra cómo detectar el enfoque en un hijo, el enfoque en el elemento padre, y cómo detectar el enfoque al entrar o salir de todo el subárbol.
export default function FocusExample() { return ( <div tabIndex={1} onFocus={(e) => { if (e.currentTarget === e.target) { console.log('focused parent'); } else { console.log('focused child', e.target.name); } if (!e.currentTarget.contains(e.relatedTarget)) { // No se activa al cambiar el enfoque entre los hijos console.log('focus entered parent'); } }} onBlur={(e) => { if (e.currentTarget === e.target) { console.log('unfocused parent'); } else { console.log('unfocused child', e.target.name); } if (!e.currentTarget.contains(e.relatedTarget)) { // No se activa al cambiar el enfoque entre los hijos console.log('focus left parent'); } }} > <label> Nombre: <input name="firstName" /> </label> <label> Apellido: <input name="lastName" /> </label> </div> ); }
Control de eventos de teclado
Este ejemplo muestra algunos eventos del teclado comunes y cuándo se disparan.
export default function KeyboardExample() { return ( <label> Nombre: <input name="firstName" onKeyDown={e => console.log('onKeyDown:', e.key, e.code)} onKeyUp={e => console.log('onKeyUp:', e.key, e.code)} /> </label> ); }