Событие React onChange возвращает ошибку TypeError: props.handleChange не является функцией - PullRequest
Новая
       66

Событие React onChange возвращает ошибку TypeError: props.handleChange не является функцией

0 голосов
/ 08 апреля 2020

Я создал простой метод класса handleChange с параметром id для класса App.

Я попытался вызвать этот метод handleChange из дочернего компонента функции с именем TodoItem.

Когда я нажал на флажок, браузер вернул TypeError, сказав, что props.handleChange(props.item.id) is not a function, как показано на рисунках:

props.handleChange is not a function

Может кто-нибудь объяснить, что не так с моими кодами в TodoItem?

App компонент класса: 

import React, { Component } from "react";
import TodoItem from "./TodoItem";
import todosData from "./todosData";

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: todosData,
    };
    this.handleChange = this.handleChange(this);
  }

  handleChange(id) {
    console.log("changed", id);
  }

  render() {
    const todoItems = this.state.todos.map((item) => (
      <TodoItem key={item.id} item={item} handleChange={this.handleChange} />
    ));

    return <div className="todo-list">{todoItems}</div>;
  }
}

export default App;

TodoItem функциональный компонент: 

import React from "react";

function TodoItem(props) {
  return (
    <div className="todo-item">
      <input
        type="checkbox"
        checked={props.item.completed}
        onChange={(e) => props.handleChange(props.item.id)}
      />
      <p>{props.item.text}</p>
    </div>
  );
}

export default TodoItem;

Ответы [ 2 ]

1 голос
/ 08 апреля 2020

Вам необходимо либо связать handleChange при использовании, либо преобразовать его в функции стрелок. Я предпочитаю функции стрелок.

переплет; 

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

функция стрелки; 

handleChange = (id) => {
    console.log("changed", id);
}

PS: если вы не измените элемент в дочернем компоненте, нет смысла передавать элемент в child и передайте item.id в props.handleChange, поскольку он в первую очередь доступен в родительском компоненте.

PS2: вы фактически вызываете handleChange вместо того, чтобы связывать его в конструкторе.

0 голосов
/ 08 апреля 2020

В вашем конструкторе вы неправильно связываете свою функцию 

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: todosData,
    };
    this.handleChange = this.handleChange.bind(this)//<-- This is right
    //this.handleChange = this.handleChange(this);//<-- This is wrong
}
...