1

Estou iniciando o estudo em React e estou como uma dificuldade nesse componente, eu quero passar o props que o componente Todo recebe para a função handleAdd, sendo que no momento esse this esta dentro da função está retornando undenifed. O código é o seguinte:

import React from 'react';
import PageHeader from '../template/PageHeader';
import Forms from '../componentes/Forms';
import List from '../componentes/List';

const Todo = (props) => {
  const handleAdd = (props) => {
    console.log(this);
  };

  return (
    <div>
      <PageHeader name='Tarefas ' small='Cadastro'></PageHeader>
      <Forms handleAdd={handleAdd}></Forms>
      <List></List>
    </div>
  );
};
export default Todo;
0

1 Resposta 1

5

Se você quiser acessar as props de um componente dentro de uma função definida dentro dele (como handleAdd), você não precisa de usar this ou sequer passá-las como argumento. Poderá acessá-las normalmente, fazendo uso do escopo do JavaScript, que te permite acessar variáveis do escopo superior.

Assim:

import React from 'react';
import PageHeader from '../template/PageHeader';
import Forms from '../componentes/Forms';
import List from '../componentes/List';

function Todo(props) {
  function handleAdd() {
    console.log(props);
  }

  return (
    <div>
      <PageHeader name='Tarefas ' small='Cadastro'></PageHeader>
      <Forms handleAdd={handleAdd}></Forms>
      <List></List>
    </div>
  );
};

export default Todo;

Veja um exemplo similar funcionando:

function Form(props) {
  return (
    <button onClick={props.onClick}>Clique-me!</button>
  );
}

function Todo(props) {
  function handleClick() {
    console.log(props);
  }

  return (
    <div>
      <span>{props.todo}</span> &nbsp;
      <Form onClick={handleClick} />
    </div>
  );
}

ReactDOM.render(
  <React.Fragment>
    <Todo todo="Foo" />
    <Todo todo="Bar" />
    <Todo todo="Baz" />
  </React.Fragment>,
  document.querySelector('#app')
);
<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>

<div id="app"></div>

Note também que eu modifiquei as arrow functions por declarações de função normal, já que não há motivos para se usar arrow functions nesse caso. :)

3
  • No caso eu queria que quando o handle apontasse para o this apontasse para o props que o Todo recebe, tipo um bind em uma classe
    – krolgon
    Commented 4/05/2020 às 21:54
  • Basta utilizar props, já que handleAdd está dentro do escopo do componente Todo. Você testou? Deu algum erro? Ao que me parece está tudo certo. Editei a resposta para adicionar um exemplo funcional. :) Commented 4/05/2020 às 22:08
  • 2
    Muito obrigada pela ajuda e esclarecimento :D
    – krolgon
    Commented 5/05/2020 às 11:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .