API de Referência
Components

Componentes comuns (por exemplo, <div>)

Todos os componentes de navegador integrados, como <div>, suportam algumas props e eventos comuns.

Referência

Componentes comuns (por exemplo, <div>) 

<div className="wrapper">Algum conteúdo</div>

Veja mais exemplos abaixo.

Props

Essas props especiais do React são suportadas para todos os componentes integrados:

  • children: Um nó React (um elemento, uma string, um número, um portal, um nó vazio como null, undefined e booleanos, ou um array de outros nós React). Especifica o conteúdo dentro do componente. Quando você usa JSX, geralmente especificará a prop children implicitamente aninhando tags como <div><span /></div>.

  • dangerouslySetInnerHTML: Um objeto da forma { __html: '<p>algum html</p>' } com uma string de HTML bruto dentro. Substitui a propriedade innerHTML do nó do DOM e exibe o HTML passado dentro. Isso deve ser usado com extrema cautela! Se o HTML dentro não for confiável (por exemplo, se for baseado em dados de usuário), você corre o risco de introduzir uma vulnerabilidade de XSS. Leia mais sobre o uso de dangerouslySetInnerHTML.

  • ref: Um objeto ref de useRef ou createRef, ou uma ref callback function, ou uma string para refs legadas. Sua ref será preenchida com o elemento DOM para esse nó. Leia mais sobre como manipular o DOM com refs.

  • suppressContentEditableWarning: Um booleano. Se true, suprime o aviso que o React mostra para elementos que têm children e contentEditable={true} (que normalmente não funcionam juntos). Use isso se você estiver construindo uma biblioteca de entrada de texto que gerencia o conteúdo contentEditable manualmente.

  • suppressHydrationWarning: Um booleano. Se você usar renderização no servidor, normalmente há um aviso quando o servidor e o cliente renderizam conteúdos diferentes. Em alguns casos raros (como timestamps), é muito difícil ou impossível garantir uma correspondência exata. Se você definir suppressHydrationWarning como true, o React não alarmará sobre discrepâncias nos atributos e no conteúdo daquele elemento. Funciona apenas a um nível de profundidade e é destinado a ser usado como uma válvula de escape. Não exagere. Leia sobre a supressão de erros de hidratação.

  • style: Um objeto com estilos CSS, por exemplo { fontWeight: 'bold', margin: 20 }. Semelhante à propriedade DOM style, os nomes das propriedades CSS precisam ser escritos em camelCase, por exemplo fontWeight em vez de font-weight. Você pode passar strings ou números como valores. Se você passar um número, como width: 100, o React automaticamente anexará px (“pixels”) ao valor, a menos que seja uma propriedade sem unidade. Recomendamos usar style apenas para estilos dinâmicos onde você não conhece os valores do estilo antecipadamente. Em outros casos, aplicar classes CSS simples com className é mais eficiente. Leia mais sobre className e style.

Essas props DOM padrão também são suportadas para todos os componentes integrados:

  • accessKey: Uma string. Especifica um atalho de teclado para o elemento. Geralmente não recomendado.
  • aria-*: Os atributos ARIA permitem que você especifique as informações da árvore de acessibilidade para este elemento. Veja Atributos ARIA para uma referência completa. No React, todos os nomes de atributos ARIA são exatamente os mesmos que em HTML.
  • autoCapitalize: Uma string. Especifica se e como a entrada do usuário deve ser capitalizada.
  • className: Uma string. Especifica o nome da classe CSS do elemento. Leia mais sobre a aplicação de estilos CSS.
  • contentEditable: Um booleano. Se true, o navegador permite que o usuário edite diretamente o elemento renderizado. Isso é usado para implementar bibliotecas de entrada de texto rico como Lexical. O React avisa se você tentar passar filhos React para um elemento com contentEditable={true} porque o React não poderá atualizar seu conteúdo após edições do usuário.
  • data-*: Os atributos de dados permitem que você anexe alguns dados em formato de string ao elemento, por exemplo data-fruit="banana". No React, eles não são comumente usados porque normalmente você leria dados de props ou state em vez disso.
  • dir: Ou 'ltr' ou 'rtl'. Especifica a direção do texto do elemento.
  • draggable: Um booleano. Especifica se o elemento é arrastável. Parte da API de Arrastar e Soltar do HTML.
  • enterKeyHint: Uma string. Especifica qual ação apresentar para a tecla enter em teclados virtuais.
  • htmlFor: Uma string. Para <label> e <output>, permite que você associe o rótulo com algum controle. Igual ao for atributo HTML. O React usa os nomes de propriedades DOM padrão (htmlFor) em vez de nomes de atributos HTML.
  • hidden: Um booleano ou uma string. Especifica se o elemento deve ser oculto.
  • id: Uma string. Especifica um identificador único para este elemento, que pode ser usado para encontrá-lo mais tarde ou conectá-lo com outros elementos. Gere-o com useId para evitar colisões entre múltiplas instâncias do mesmo componente.
  • is: Uma string. Se especificado, o componente se comportará como um elemento personalizado.
  • inputMode: Uma string. Especifica qual tipo de teclado exibir (por exemplo, texto, número ou telefone).
  • itemProp: Uma string. Especifica qual propriedade o elemento representa para crawlers de dados estruturados.
  • lang: Uma string. Especifica o idioma do elemento.
  • onAnimationEnd: Uma função de manipulador AnimationEvent. Dispara quando uma animação CSS é completada.
  • onAnimationEndCapture: Uma versão de onAnimationEnd que dispara na fase de captura.
  • onAnimationIteration: Uma função de manipulador AnimationEvent. Dispara quando uma iteração de uma animação CSS termina, e outra começa.
  • onAnimationIterationCapture: Uma versão de onAnimationIteration que dispara na fase de captura.
  • onAnimationStart: Uma função de manipulador AnimationEvent. Dispara quando uma animação CSS começa.
  • onAnimationStartCapture: onAnimationStart, mas dispara na fase de captura.
  • onAuxClick: Uma função de manipulador MouseEvent. Dispara quando um botão de ponteiro não primário é clicado.
  • onAuxClickCapture: Uma versão de onAuxClick que dispara na fase de captura.
  • onBeforeInput: Uma função de manipulador InputEvent. Dispara antes que o valor de um elemento editável seja modificado. O React não usa ainda o evento nativo beforeinput e, em vez disso, tenta fazer um polyfill usando outros eventos.
  • onBeforeInputCapture: Uma versão de onBeforeInput que dispara na fase de captura.
  • onBlur: Uma função de manipulador FocusEvent. Dispara quando um elemento perde o foco. Ao contrário do evento blur do navegador, no React o evento onBlur propaga.
  • onBlurCapture: Uma versão de onBlur que dispara na fase de captura.
  • onClick: Uma função de manipulador MouseEvent. Dispara quando o botão primário foi clicado no dispositivo de apontar.
  • onClickCapture: Uma versão de onClick que dispara na fase de captura.
  • onCompositionStart: Uma função de manipulador CompositionEvent. Dispara quando um editor de método de entrada inicia uma nova sessão de composição.
  • onCompositionStartCapture: Uma versão de onCompositionStart que dispara na fase de captura.
  • onCompositionEnd: Uma função de manipulador CompositionEvent. Dispara quando um editor de método de entrada completa ou cancela uma sessão de composição.
  • onCompositionEndCapture: Uma versão de onCompositionEnd que dispara na fase de captura.
  • onCompositionUpdate: Uma função de manipulador CompositionEvent. Dispara quando um editor de método de entrada recebe um novo caractere.
  • onCompositionUpdateCapture: Uma versão de onCompositionUpdate que dispara na fase de captura.
  • onContextMenu: Uma função de manipulador MouseEvent. Dispara quando o usuário tenta abrir um menu de contexto.
  • onContextMenuCapture: Uma versão de onContextMenu que dispara na fase de captura.
  • onCopy: Uma função de manipulador ClipboardEvent. Dispara quando o usuário tenta copiar algo para a área de transferência.
  • onCopyCapture: Uma versão de onCopy que dispara na fase de captura.
  • onCut: Uma função de manipulador ClipboardEvent. Dispara quando o usuário tenta cortar algo para a área de transferência.
  • onCutCapture: Uma versão de onCut que dispara na fase de captura.
  • onDoubleClick: Uma função de manipulador MouseEvent. Dispara quando o usuário clica duas vezes. Corresponde ao evento dblclick do navegador.
  • onDoubleClickCapture: Uma versão de onDoubleClick que dispara na fase de captura.
  • onDrag: Uma função de manipulador DragEvent. Dispara enquanto o usuário está arrastando algo.
  • onDragCapture: Uma versão de onDrag que dispara na fase de captura.
  • onDragEnd: Uma função de manipulador DragEvent. Dispara quando o usuário para de arrastar algo.
  • onDragEndCapture: Uma versão de onDragEnd que dispara na fase de captura.
  • onDragEnter: Uma função de manipulador DragEvent. Dispara quando o conteúdo arrastado entra em um alvo de soltura válido.
  • onDragEnterCapture: Uma versão de onDragEnter que dispara na fase de captura.
  • onDragOver: Uma função de manipulador DragEvent. Dispara em um alvo de soltura válido enquanto o conteúdo arrastado está sendo arrastado sobre ele. Você deve chamar e.preventDefault() aqui para permitir a soltura.
  • onDragOverCapture: Uma versão de onDragOver que dispara na fase de captura.
  • onDragStart: Uma função de manipulador DragEvent. Dispara quando o usuário começa a arrastar um elemento.
  • onDragStartCapture: Uma versão de onDragStart que dispara na fase de captura.
  • onDrop: Uma função de manipulador DragEvent. Dispara quando algo é solto em um alvo de soltura válido.
  • onDropCapture: Uma versão de onDrop que dispara na fase de captura.
  • onFocus: Uma função de manipulador FocusEvent. Dispara quando um elemento recebe foco. Ao contrário do evento focus do navegador, no React o evento onFocus propaga.
  • onFocusCapture: Uma versão de onFocus que dispara na fase de captura.
  • onGotPointerCapture: Uma função de manipulador PointerEvent. Dispara quando um elemento captura programaticamente um ponteiro.
  • onGotPointerCaptureCapture: Uma versão de onGotPointerCapture que dispara na fase de captura.
  • onKeyDown: Uma função de manipulador KeyboardEvent. Dispara quando uma tecla é pressionada.
  • onKeyDownCapture: Uma versão de onKeyDown que dispara na fase de captura.
  • onKeyPress: Uma função de manipulador KeyboardEvent. Obsoleto. Use onKeyDown ou onBeforeInput em vez disso.
  • onKeyPressCapture: Uma versão de onKeyPress que dispara na fase de captura.
  • onKeyUp: Uma função de manipulador KeyboardEvent. Dispara quando uma tecla é liberada.
  • onKeyUpCapture: Uma versão de onKeyUp que dispara na fase de captura.
  • onLostPointerCapture: Uma função de manipulador PointerEvent. Dispara quando um elemento para de capturar um ponteiro.
  • onLostPointerCaptureCapture: Uma versão de onLostPointerCapture que dispara na fase de captura.
  • onMouseDown: Uma função de manipulador MouseEvent. Dispara quando o ponteiro é pressionado.
  • onMouseDownCapture: Uma versão de onMouseDown que dispara na fase de captura.
  • onMouseEnter: Uma função de manipulador MouseEvent. Dispara quando o ponteiro se move para dentro de um elemento. Não tem uma fase de captura. Em vez disso, onMouseLeave e onMouseEnter propagam do elemento sendo deixado para o que está sendo acessado.
  • onMouseLeave: Uma função de manipulador MouseEvent. Dispara quando o ponteiro se move para fora de um elemento. Não tem uma fase de captura. Em vez disso, onMouseLeave e onMouseEnter propagam do elemento sendo deixado para o que está sendo acessado.
  • onMouseMove: Uma função de manipulador MouseEvent. Dispara quando o ponteiro muda de coordenadas.
  • onMouseMoveCapture: Uma versão de onMouseMove que dispara na fase de captura.
  • onMouseOut: Uma função de manipulador MouseEvent. Dispara quando o ponteiro se move para fora de um elemento, ou se ele se move para dentro de um elemento filho.
  • onMouseOutCapture: Uma versão de onMouseOut que dispara na fase de captura.
  • onMouseUp: Uma função de manipulador MouseEvent. Dispara quando o ponteiro é liberado.
  • onMouseUpCapture: Uma versão de onMouseUp que dispara na fase de captura.
  • onPointerCancel: Uma função de manipulador PointerEvent. Dispara quando o navegador cancela uma interação de ponteiro.
  • onPointerCancelCapture: Uma versão de onPointerCancel que dispara na fase de captura.
  • onPointerDown: Uma função de manipulador PointerEvent. Dispara quando um ponteiro se torna ativo.
  • onPointerDownCapture: Uma versão de onPointerDown que dispara na fase de captura.
  • onPointerEnter: Uma função de manipulador PointerEvent. Dispara quando um ponteiro se move para dentro de um elemento. Não tem uma fase de captura. Em vez disso, onPointerLeave e onPointerEnter propagam do elemento sendo deixado para o que está sendo acessado.
  • onPointerLeave: Uma função de manipulador PointerEvent. Dispara quando um ponteiro se move para fora de um elemento. Não tem uma fase de captura. Em vez disso, onPointerLeave e onPointerEnter propagam do elemento sendo deixado para o que está sendo acessado.
  • onPointerMove: Uma função de manipulador PointerEvent. Dispara quando um ponteiro muda de coordenadas.
  • onPointerMoveCapture: Uma versão de onPointerMove que dispara na fase de captura.
  • onPointerOut: Uma função de manipulador PointerEvent. Dispara quando um ponteiro se move para fora de um elemento, se a interação do ponteiro é cancelada, e algumas outras razões.
  • onPointerOutCapture: Uma versão de onPointerOut que dispara na fase de captura.
  • onPointerUp: Uma função de manipulador PointerEvent. Dispara quando um ponteiro não está mais ativo.
  • onPointerUpCapture: Uma versão de onPointerUp que dispara na fase de captura.
  • onPaste: Uma função de manipulador ClipboardEvent. Dispara quando o usuário tenta colar algo da área de transferência.
  • onPasteCapture: Uma versão de onPaste que dispara na fase de captura.
  • onScroll: Uma função de manipulador Event. Dispara quando um elemento foi rolado. Este evento não se propaga.
  • onScrollCapture: Uma versão de onScroll que dispara na fase de captura.
  • onSelect: Uma função de manipulador Event. Dispara após a seleção dentro de um elemento editável como um input mudar. O React estende o evento onSelect para funcionar também com elementos contentEditable={true}. Além disso, o React o estende para disparar para seleção vazia e em edições (que podem afetar a seleção).
  • onSelectCapture: Uma versão de onSelect que dispara na fase de captura.
  • onTouchCancel: Uma função de manipulador TouchEvent. Dispara quando o navegador cancela uma interação de toque.
  • onTouchCancelCapture: Uma versão de onTouchCancel que dispara na fase de captura.
  • onTouchEnd: Uma função de manipulador TouchEvent. Dispara quando um ou mais pontos de toque são removidos.
  • onTouchEndCapture: Uma versão de onTouchEnd que dispara na fase de captura.
  • onTouchMove: Uma função de manipulador TouchEvent. Dispara quando um ou mais pontos de toque são movidos.
  • onTouchMoveCapture: Uma versão de onTouchMove que dispara na fase de captura.
  • onTouchStart: Uma função de manipulador TouchEvent. Dispara quando um ou mais pontos de toque são colocados.
  • onTouchStartCapture: Uma versão de onTouchStart que dispara na fase de captura.
  • onTransitionEnd: Uma função de manipulador TransitionEvent. Dispara quando uma transição CSS completa.
  • onTransitionEndCapture: Uma versão de onTransitionEnd que dispara na fase de captura.
  • onWheel: Uma função de manipulador WheelEvent. Dispara quando o usuário gira um botão de roda.
  • onWheelCapture: Uma versão de onWheel que dispara na fase de captura.
  • role: Uma string. Especifica o papel do elemento explicitamente para tecnologias assistivas.
  • slot: Uma string. Especifica o nome do slot ao usar shadow DOM. No React, um padrão equivalente é tipicamente alcançado passando JSX como props, por exemplo <Layout left={<Sidebar />} right={<Content />} />.
  • spellCheck: Um booleano ou nulo. Se definido explicitamente como true ou false, habilita ou desabilita a verificação ortográfica.
  • tabIndex: Um número. Sobrescreve o comportamento padrão do botão Tab. Evite usar valores diferentes de -1 e 0.
  • title: Uma string. Especifica o texto da tooltip para o elemento.
  • translate: Pode ser 'yes' ou 'no'. Passar 'no' exclui o conteúdo do elemento de ser traduzido.

Você também pode passar atributos personalizados como props, por exemplo mycustomprop="someValue". Isso pode ser útil ao integrar com bibliotecas de terceiros. O nome do atributo personalizado deve estar em minúsculas e não deve começar com on. O valor será convertido em uma string. Se você passar null ou undefined, o atributo personalizado será removido.

Esses eventos disparam apenas para os elementos <form>:

  • onReset: Uma função de manipulador Event. Dispara quando um formulário é redefinido.
  • onResetCapture: Uma versão de onReset que dispara na fase de captura.
  • onSubmit: Uma função de manipulador Event. Dispara quando um formulário é enviado.
  • onSubmitCapture: Uma versão de onSubmit que dispara na fase de captura.

Esses eventos disparam apenas para os elementos <dialog>. Ao contrário dos eventos do navegador, eles propagam no React:

  • onCancel: Uma função de manipulador Event. Dispara quando o usuário tenta dispensar o diálogo.
  • onCancelCapture: Uma versão de onCancel que dispara na fase de captura.
  • onClose: Uma função de manipulador Event. Dispara quando um diálogo foi fechado.
  • onCloseCapture: Uma versão de onClose que dispara na fase de captura.

Esses eventos disparam apenas para os elementos <details>. Ao contrário dos eventos do navegador, eles propagam no React:

  • onToggle: Uma função de manipulador Event. Dispara quando o usuário alterna os detalhes.
  • onToggleCapture: Uma versão de onToggle que dispara na fase de captura.

Esses eventos disparam para <img>, <iframe>, <object>, <embed>, <link>, e elementos SVG <image> (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag). Ao contrário dos eventos do navegador, eles propagam no React:

  • onLoad: Uma função de manipulador Event. Dispara quando o recurso foi carregado.
  • onLoadCapture: Uma versão de onLoad que dispara na fase de captura.
  • onError: Uma função de manipulador Event. Dispara quando o recurso não pôde ser carregado.
  • onErrorCapture: Uma versão de onError que dispara na fase de captura.

Esses eventos disparam para recursos como <audio> e <video>. Ao contrário dos eventos do navegador, eles propagam no React:

  • onAbort: Uma função de manipulador Event. Dispara quando o recurso não foi totalmente carregado, mas não devido a um erro.
  • onAbortCapture: Uma versão de onAbort que dispara na fase de captura.
  • onCanPlay: Uma função de manipulador Event. Dispara quando há dados suficientes para começar a reprodução, mas não o suficiente para reproduzir até o final sem buffering.
  • onCanPlayCapture: Uma versão de onCanPlay que dispara na fase de captura.
  • onCanPlayThrough: Uma função de manipulador Event. Dispara quando há dados suficientes que é provável que seja possível começar a reprodução sem buffering até o final.
  • onCanPlayThroughCapture: Uma versão de onCanPlayThrough que dispara na fase de captura.
  • onDurationChange: Uma função de manipulador Event. Dispara quando a duração da mídia foi atualizada.
  • onDurationChangeCapture: Uma versão de onDurationChange que dispara na fase de captura.
  • onEmptied: Uma função de manipulador Event. Dispara quando a mídia se torna vazia.
  • onEmptiedCapture: Uma versão de onEmptied que dispara na fase de captura.
  • onEncrypted: Uma função de manipulador Event. Dispara quando o navegador encontra mídia criptografada.
  • onEncryptedCapture: Uma versão de onEncrypted que dispara na fase de captura.
  • onEnded: Uma função de manipulador Event. Dispara quando a reprodução para porque não há mais nada para tocar.
  • onEndedCapture: Uma versão de onEnded que dispara na fase de captura.
  • onError: Uma função de manipulador Event. Dispara quando o recurso não pôde ser carregado.
  • onErrorCapture: Uma versão de onError que dispara na fase de captura.
  • onLoadedData: Uma função de manipulador Event. Dispara quando o quadro de reprodução atual foi carregado.
  • onLoadedDataCapture: Uma versão de onLoadedData que dispara na fase de captura.
  • onLoadedMetadata: Uma função de manipulador Event. Dispara quando os metadados foram carregados.
  • onLoadedMetadataCapture: Uma versão de onLoadedMetadata que dispara na fase de captura.
  • onLoadStart: Uma função de manipulador Event. Dispara quando o navegador começou a carregar o recurso.
  • onLoadStartCapture: Uma versão de onLoadStart que dispara na fase de captura.
  • onPause: Uma função de manipulador Event. Dispara quando a mídia foi pausada.
  • onPauseCapture: Uma versão de onPause que dispara na fase de captura.
  • onPlay: Uma função de manipulador Event. Dispara quando a mídia não está mais pausada.
  • onPlayCapture: Uma versão de onPlay que dispara na fase de captura.
  • onPlaying: Uma função de manipulador Event. Dispara quando a mídia começa ou reinicia a reprodução.
  • onPlayingCapture: Uma versão de onPlaying que dispara na fase de captura.
  • onProgress: Uma função de manipulador Event. Dispara periodicamente enquanto o recurso está carregando.
  • onProgressCapture: Uma versão de onProgress que dispara na fase de captura.
  • onRateChange: Uma função de manipulador Event. Dispara quando a taxa de reprodução muda.
  • onRateChangeCapture: Uma versão de onRateChange que dispara na fase de captura.
  • onResize: Uma função de manipulador Event. Dispara quando o vídeo muda de tamanho.
  • onResizeCapture: Uma versão de onResize que dispara na fase de captura.
  • onSeeked: Uma função de manipulador Event. Dispara quando uma operação de busca é completada.
  • onSeekedCapture: Uma versão de onSeeked que dispara na fase de captura.
  • onSeeking: Uma função de manipulador Event. Dispara quando uma operação de busca começa.
  • onSeekingCapture: Uma versão de onSeeking que dispara na fase de captura.
  • onStalled: Uma função de manipulador Event. Dispara quando o navegador está esperando por dados, mas eles continuam não carregando.
  • onStalledCapture: Uma versão de onStalled que dispara na fase de captura.
  • onSuspend: Uma função de manipulador Event. Dispara quando o carregamento do recurso foi suspenso.
  • onSuspendCapture: Uma versão de onSuspend que dispara na fase de captura.
  • onTimeUpdate: Uma função de manipulador Event. Dispara quando o tempo de reprodução atual é atualizado.
  • onTimeUpdateCapture: Uma versão de onTimeUpdate que dispara na fase de captura.
  • onVolumeChange: Uma função de manipulador Event. Dispara quando o volume muda.
  • onVolumeChangeCapture: Uma versão de onVolumeChange que dispara na fase de captura.
  • onWaiting: Uma função de manipulador Event. Dispara quando a reprodução é interrompida devido à falta temporária de dados.
  • onWaitingCapture: Uma versão de onWaiting que dispara na fase de captura.

Ressalvas

  • Você não pode passar children e dangerouslySetInnerHTML ao mesmo tempo.
  • Alguns eventos (como onAbort e onLoad) não se propagam no navegador, mas se propagam no React.

Função de callback ref

Em vez de um objeto ref (como o retornado por useRef), você pode passar uma função para o atributo ref.

<div ref={(node) => console.log(node)} />

Veja um exemplo de uso da callback ref.

Quando o nó DOM <div> é adicionado à tela, o React chamará sua callback ref com o node DOM como argumento. Quando aquele nó DOM <div> é removido, o React chamará sua callback ref com null.

O React também chamará sua callback ref sempre que você passar uma callback ref diferente. No exemplo acima, (node) => { ... } é uma função diferente em cada renderização. Quando seu componente re-renderiza, a anterior função será chamada com null como argumento, e a próxima função será chamada com o nó DOM.

Parâmetros

  • node: Um nó DOM ou null. O React lhe passará o nó DOM quando a ref for anexada, e null quando a ref for destacada. A menos que você passe a mesma referência de função para a callback ref em cada renderização, a callback será temporariamente destacada e reanexada durante cada re-renderização do componente.

Canary

Retorna

  • opcional função de limpeza: Quando a ref é destacada, o React chamará a função de limpeza. Se uma função não for retornada pela callback ref, o React chamará a callback novamente com null como argumento quando a ref for destacada.

<div ref={(node) => {
  console.log(node);

  return () => {
    console.log('Limpeza', node)
  }
}}>

Ressalvas

  • Quando o Modo Estrito está ativado, o React executará um ciclo extra de configuração+limpeza somente para desenvolvimento antes da primeira configuração real. Este é um teste de estresse que garante que sua lógica de limpeza “reflete” sua lógica de configuração e que ela para ou reverte o que a configuração está fazendo. Se isso causar um problema, implemente a função de limpeza.
  • Quando você passar uma callback ref diferente, o React chamará a função de limpeza da callback anterior, se fornecida. Se nenhuma função de limpeza for definida, a callback ref será chamada com null como argumento. A próxima função será chamada com o nó DOM.

Objeto de evento do React

Seus manipuladores de eventos receberão um objeto de evento do React. Às vezes, ele também é conhecido como um “evento sintético”.

<button onClick={e => {
  console.log(e); // Objeto de evento do React
}} />

Ele se conforma ao mesmo padrão que os eventos DOM subjacentes, mas corrige algumas inconsistências dos navegadores.

Alguns eventos do React não se mapeiam diretamente para os eventos nativos do navegador. Por exemplo, em onMouseLeave, e.nativeEvent apontará para um evento mouseout. O mapeamento específico não faz parte da API pública e pode mudar no futuro. Se você precisar do evento do navegador subjacente por algum motivo, leia a partir de e.nativeEvent.

Propriedades

Os objetos de evento do React implementam algumas das propriedades padrão do Event:

  • bubbles: Um booleano. Retorna se o evento borbulha através do DOM.
  • cancelable: Um booleano. Retorna se o evento pode ser cancelado.
  • currentTarget: Um nó DOM. Retorna o nó ao qual o manipulador atual está anexado na árvore React.
  • defaultPrevented: Um booleano. Retorna se preventDefault foi chamado.
  • eventPhase: Um número. Retorna em qual fase o evento está atualmente.
  • isTrusted: Um booleano. Retorna se o evento foi iniciado pelo usuário.
  • target: Um nó DOM. Retorna o nó no qual o evento ocorreu (que pode ser um filho distante).
  • timeStamp: Um número. Retorna o tempo em que o evento ocorreu.

Além disso, os objetos de evento do React fornecem essas propriedades:

  • nativeEvent: Um Event DOM. O objeto original do evento do navegador.

Métodos

Os objetos de evento do React implementam alguns dos métodos padrão do Event:

Além disso, os objetos de evento do React fornecem esses métodos:

  • isDefaultPrevented(): Retorna um valor booleano indicando se preventDefault foi chamado.
  • isPropagationStopped(): Retorna um valor booleano indicando se stopPropagation foi chamado.
  • persist(): Não usado com React DOM. Com React Native, chame isso para ler as propriedades do evento após o evento.
  • isPersistent(): Não usado com React DOM. Com React Native, retorna se persist foi chamado.

Ressalvas

  • Os valores de currentTarget, eventPhase, target, e type refletem os valores que seu código React espera. Nos bastidores, o React anexa manipuladores de eventos na raiz, mas isso não é refletido nos objetos de evento do React. Por exemplo, e.currentTarget pode não ser o mesmo que o e.nativeEvent.currentTarget subjacente. Para eventos polyfilled, e.type (tipo de evento React) pode diferir de e.nativeEvent.type (tipo subjacente).

Função de manipulador de evento AnimationEvent

Um tipo de manipulador de eventos para os eventos de animação CSS.

<div
  onAnimationStart={e => console.log('onAnimationStart')}
  onAnimationIteration={e => console.log('onAnimationIteration')}
  onAnimationEnd={e => console.log('onAnimationEnd')}
/>

Parâmetros

Função de manipulador de evento ClipboardEvent

Um tipo de manipulador de eventos para os eventos da Clipboard API.

<input
  onCopy={e => console.log('onCopy')}
  onCut={e => console.log('onCut')}
  onPaste={e => console.log('onPaste')}
/>

Parâmetros

Função de manipulador de evento CompositionEvent

Um tipo de manipulador de eventos para os eventos de editor de método de entrada (IME).

<input
  onCompositionStart={e => console.log('onCompositionStart')}
  onCompositionUpdate={e => console.log('onCompositionUpdate')}
  onCompositionEnd={e => console.log('onCompositionEnd')}
/>

Parâmetros

Função de manipulador de evento DragEvent

Um tipo de manipulador de eventos para os eventos da HTML Drag and Drop API.

<>
  <div
    draggable={true}
    onDragStart={e => console.log('onDragStart')}
    onDragEnd={e => console.log('onDragEnd')}
  >
    Fonte de arrasto
  </div>

  <div
    onDragEnter={e => console.log('onDragEnter')}
    onDragLeave={e => console.log('onDragLeave')}
    onDragOver={e => { e.preventDefault(); console.log('onDragOver'); }}
    onDrop={e => console.log('onDrop')}
  >
    Alvo de soltura
  </div>
</>

Parâmetros

Função de manipulador de evento FocusEvent

Um tipo de manipulador de eventos para os eventos de foco.

<input
  onFocus={e => console.log('onFocus')}
  onBlur={e => console.log('onBlur')}
/>

Veja um exemplo.

Parâmetros

Função de manipulador de evento Event

Um tipo de manipulador para eventos genéricos.

Parâmetros

Função de manipulador de evento InputEvent

Um tipo de manipulador de eventos para o evento onBeforeInput.

<input onBeforeInput={e => console.log('onBeforeInput')} />

Parâmetros

Função de manipulador de evento KeyboardEvent

Um tipo de manipulador de eventos para eventos de teclado.

<input
  onKeyDown={e => console.log('onKeyDown')}
  onKeyUp={e => console.log('onKeyUp')}
/>

Veja um exemplo.

Parâmetros

Função de manipulador de evento MouseEvent

Um tipo de manipulador de eventos para eventos de 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')}
/>

Veja um exemplo.

Parâmetros

Função de manipulador de evento PointerEvent

Um tipo de manipulador de eventos para eventos de ponteiro.

<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')}
/>

Veja um exemplo.

Parâmetros

Função de manipulador de evento TouchEvent

Um tipo de manipulador de eventos para eventos de toque.

<div
  onTouchStart={e => console.log('onTouchStart')}
  onTouchMove={e => console.log('onTouchMove')}
  onTouchEnd={e => console.log('onTouchEnd')}
  onTouchCancel={e => console.log('onTouchCancel')}
/>

Parâmetros

Função de manipulador de evento TransitionEvent

Um tipo de manipulador de eventos para os eventos de transição CSS.

<div
  onTransitionEnd={e => console.log('onTransitionEnd')}
/>

Parâmetros

Função de manipulador de evento UIEvent

Um tipo de manipulador de eventos para eventos genéricos de UI.

<div
  onScroll={e => console.log('onScroll')}
/>

Parâmetros

Função de manipulador de evento WheelEvent

Um tipo de manipulador de eventos para o evento onWheel.

<div
  onWheel={e => console.log('onWheel')}
/>

Parâmetros

Uso

Aplicando estilos CSS

No React, você especifica uma classe CSS com className. Funciona como o atributo class em HTML:

<img className="avatar" />

Então, você escreve as regras CSS para isso em um arquivo CSS separado:

/* No seu CSS */
.avatar {
  border-radius: 50%;
}

O React não prescreve como você deve adicionar arquivos CSS. No caso mais simples, você adicionará uma tag <link> ao seu HTML. Se você usar uma ferramenta de build ou um framework, consulte sua documentação para aprender como adicionar um arquivo CSS ao seu projeto.

Às vezes, os valores de estilo dependem de dados. Use o atributo style para passar alguns estilos dinamicamente:

<img
  className="avatar"
  style={{
    width: user.imageSize,
    height: user.imageSize
  }}
/>

No exemplo acima, style={{}} não é uma sintaxe especial, mas um objeto regular {} dentro das chaves style={ } JSX. Recomend

PreviousComponents
Next<form>