{"componentChunkName":"component---src-templates-docs-js","path":"/docs/handling-events.html","result":{"data":{"markdownRemark":{"html":"

Manipular eventos em elementos React é muito semelhante a manipular eventos em elementos do DOM. Existem algumas diferenças de sintaxe:

\n\n

Por exemplo, com HTML:

\n
<button onclick=\"activateLasers()\">\n  Ativar lasers\n</button>
\n

É ligeiramente diferente com React:

\n
<button onClick={activateLasers}>  Ativar lasers\n</button>
\n

Outra diferença é que você não pode retornar false para evitar o comportamento padrão no React. Você deve chamar preventDefault explícitamente. Por exemplo, com HTML simples, para evitar que um link abra uma nova página, você pode escrever:

\n
<a href=\"#\" onclick=\"console.log('O link foi clicado.'); return false\">\n  Clique Aqui\n</a>
\n

No React, isso poderia ser:

\n
function ActionLink() {\n  function handleClick(e) {    e.preventDefault();    console.log('O link foi clicado.');  }\n  return (\n    <a href=\"#\" onClick={handleClick}>      Clique Aqui\n    </a>\n  );\n}
\n

Aqui, ”e” é um synthetic event. O React define esses eventos sintéticos de acordo com a especificação W3C. Então, não precisamos nos preocupar com a compatibilidade entre navegadores. Os eventos React não funcionam exatamente da mesma forma que os eventos nativos. Veja a página SyntheticEvent para saber mais.

\n

Ao usar o React, geralmente você não precisa chamar addEventListener para adicionar ouvintes a um elemento no DOM depois que ele é criado. Ao invés disso você pode apenas definir um ouvinte quando o elemento é inicialmente renderizado.

\n

Quando você define um componente usando uma classe do ES6, um padrão comum é que um manipulador de eventos seja um método na classe. Por exemplo, este componente Toggle renderiza um botão que permite ao usuário alternar entre os estados “ON” e “OFF”:

\n
class Toggle extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { isToggleOn: true };\n\n    // Aqui utilizamos o `bind` para que o `this` funcione dentro da nossa callback    this.handleClick = this.handleClick.bind(this);  }\n\n  handleClick() {    this.setState(state => ({      isToggleOn: !state.isToggleOn    }));  }\n  render() {\n    return (\n      <button onClick={this.handleClick}>        {this.state.isToggleOn ? 'ON' : 'OFF'}\n      </button>\n    );\n  }\n}\n\nReactDOM.render(\n  <Toggle />,\n  document.getElementById('root')\n);
\n

Experimente no CodePen

\n

Você precisa ter cuidado com o significado do this nos callbacks do JSX. Em JavaScript, os métodos de classe não são vinculados por padrão. Se você esquecer de fazer o bind de this.handleClick e passá-lo para um onClick, o this será undefined quando a função for realmente chamada.

\n

Este não é um comportamento específico do React. É uma parte de como funcionam as funções em JavaScript. Geralmente, se você referir a um método sem () depois dele, como onClick={this.handleClick}, você deve fazer o bind manual deste método.

\n

Se ficar chamando “bind” incomoda você, há duas maneiras de contornar isso. Se você estiver usando a sintaxe experimental de campos de classe pública, você pode usar campos de classe para vincular callbacks corretamente:

\n
class LoggingButton extends React.Component {\n  // Essa sintaxe garante que o `this` seja vinculado ao handleClick.  // Atenção: essa é uma sintaxe *experimental*.  handleClick = () => {    console.log('this is:', this);  }\n  render() {\n    return (\n      <button onClick={this.handleClick}>\n        Clique Aqui\n      </button>\n    );\n  }\n}
\n

Essa sintaxe é habilitada por padrão no Create React App.

\n

Se você não estiver usando a sintaxe de campos de classe, poderá usar uma arrow function como callback:

\n
class LoggingButton extends React.Component {\n  handleClick() {\n    console.log('this is:', this);\n  }\n\n  render() {\n    // Essa sintaxe garante que o `this` seja vinculado ao handleClick.    return (      <button onClick={() => this.handleClick()}>        Click me\n      </button>\n    );\n  }\n}
\n

O problema com esta sintaxe é que um callback diferente é criado toda vez que o LoggingButton é renderizado. Na maioria dos casos, tudo bem. No entanto, se esse callback for passado para componentes inferiores através de props, esses componentes poderão fazer uma renderização extra. Geralmente recomendamos a vinculação no construtor ou a sintaxe dos campos de classe para evitar esse tipo de problema de desempenho.

\n

Passando Argumentos para Manipuladores de Eventos

\n

Dentro de uma estrutura de repetição, é comum querer passar um parâmetro extra para um manipulador de evento. Por exemplo, se id é o ID de identificação da linha, qualquer um dos dois a seguir funcionará:

\n
<button onClick={(e) => this.deleteRow(id, e)}>Deletar linha</button>\n<button onClick={this.deleteRow.bind(this, id)}>Deletar linha</button>
\n

As duas linhas acima são equivalentes e usam arrow functions e Function.prototype.bind respectivamente.

\n

Em ambos os casos, o argumento e representando o evento do React será passado como segundo argumento após o ID. Com uma arrow function, nós temos que passá-lo explicitamente. Mas com o bind outros argumentos adicionais serão automaticamente encaminhados.

","frontmatter":{"title":"Manipulando eventos","next":"conditional-rendering.html","prev":"state-and-lifecycle.html"},"fields":{"path":"content/docs/handling-events.md","slug":"docs/handling-events.html"}}},"pageContext":{"slug":"docs/handling-events.html"}},"staticQueryHashes":[]}