TransWikia.com

Dúvida na execução

Stack Overflow em Português Asked by Bruno Santana on December 30, 2021

Estou assistindo o curso básico de ReactJS do João Ribeiro, e na aula 17 ele escreve o seguinte código:

class App extends React.Component {

  metodo = (texto) => {
    console.log(texto)
  }
  
  render() {
    return (
      <div>
        <button onClick={this.metodo('Olá mundo')}>Clicar</button>
      </div>
    )
  }
}
ReactDOM.render(<App /> , document.getElementById('root'))
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

Minha dúvida é: Por que o "Olá mundo" já aparece no console mesmo antes de o botão receber o clique?

3 Answers

Como já responderam, onClick é uma prop que deve receber uma função. Você não passou uma função, você passou o retorno de uma função. A diferença fica claríssima no exemplo abaixo, que coloquei no CodeSandbox

export default class App extends React.Component {
  metodo = texto => {
    console.log(texto);
  };

  metodoCorreto = texto => event => {
    console.log(event.target);
    console.log(texto);
  };

  render() {
    return (
      <div>
        <button onClick={this.metodo("Olá mundo")}>Clicar</button>
        <button onClick={this.metodoCorreto("Olá mundo")}>
          Clicar correto
        </button>

        <button
          onClick={event => {
            this.metodo("Olá mundo");
          }}
        >
          Clicar correto 2
        </button>
      </div>
    );
  }
}

Answered by Rodrigo Amaral on December 30, 2021

a funcao "método" recebe um parametro chamado "texto"

metodo(texto)

Entao, ao passar a string "olá mundo" no metodo("ola mundo"), ele imprime no console o proprio texto, pois o Metodo() chama a funcao console.log(texto) // No caso o texto imprimido é ola mundo.

Isso é algo muito básico de JavaScript, se você teve dificuldades com algo simples, com certeza tera muita dificuldade a lidar com o React, principalmente na parte de States

recomendo aprender o basico de JS primeiro

Explicando funcoes

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Fun%C3%A7%C3%B5es

Answered by srluccasonline on December 30, 2021

Porque a propriedade onClick deve receber uma função como handler, mas você não está declarando uma função, você está invocando uma função e passando o retorno dela para o onClick.

Como a função metodo é invocada, ela imprime Olá mundo. Se você quer invocar a função metodo durante o click, pode declarar uma função anônima dentro da propriedade onClick, que por sua vez invoca o seu método, da seguinte maneira:

<button onClick={() => this.metodo('Olá mundo')}>Clicar</button>

Answered by Andre on December 30, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP