2

Estou tentando fazer um todolist com React e no momento tenho dois componentes: O TodoListApp e TodoForm. No TodoListApp tenho uma função que adiciona um valor em uma lista que está no state, mas esse valor vem de outro componente: o TodoForm.

inserir a descrição da imagem aqui

Vou colocar o código dos dois:

import React from 'react';
import TodoForm from '../components/TodoForm';

export default class TodoListApp extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      items: []
    }
  }

  render() {
    return (
      <TodoForm pushToItems={this.pushToItems}></TodoForm>
    );
  }


 //Tento passar esta função para o outro componente
  pushToItems = (todo) => {
    this.setState({
      items: [...this.state.items, todo]
    });
  }
}

Componente de apresentação:

import React from 'react';

export default class TodoForm extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      todo: ''
    }
  }

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  }

  //Chamo a função que vem do outro componente através das props.
  onAdd = () => {
    this.props.pushToItems(this.state.todo);
  }

  render() {
    return (
      <div>
        <input type="text" name="todo" placeholder="Enter todo here"
         onChange={this.handleChange}></input>
        <button type="button" onClick={this.onAdd}>Add</button>
      </div>
    );
  }

}

O que está acontecendo é que quando clico no botão de adicionar um todo, ele me retorna:

Uncaught TypeError: this.props.pushToItems is not a function

Como se o componente todoform não estivesse recebendo a função como prop.

Alguém sabe o que pode ser?

2

3 Respostas 3

1

Esse problema ocorre por que o contexto é quebrado, você pode ler mais aqui. Resumidamente, SEMPRE utilize bind no construtor para todas as suas funções:

 constructor(props) {
   super(props);

   this.handleChange = this.handleChange.bind(this);

   this.state = {
     todo: ''
   }
 }

Isso é uma chatice. Felizmente, Hooks elimina esse - e muitos outros - problema por não utilizar classes.

0

Na hora de passar a função como props para outro componente, tente fazer desta forma:

  <TodoForm pushToItems={this.pushToItems.bind(this)}></TodoForm>
0

https://pt-br.reactjs.org/docs/faq-functions.html

Você pode no filho usar :

this.props.NomeDaFunc(Parametro1)

No pai você usa:

<SeuComponente NomedaFunc={ this.NomeDaFunc.bind(this) } />

Ele vai executar ela normalmente, isso é algo interessante se você quiser mudar um estado do pai de dentro de uma filha, como também usar Func. de validação de dentro dela.

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 .