1
votes

Impossible de lire la propriété 'handleChange' d'undefined

Je suis nouveau pour réagir. J'obtiens une erreur ci-dessus. Qu'est-ce que je fais mal?

Voici mon code:

import React from "react"
import ReactDOM from "react-dom"
import toDoLists from "./components/Array"


class Main extends React.Component {
    render(){
        return (
        <p>
            <input type="checkbox" checked={this.props.completed} onChange={function(props){
                this.props.handleChange(this.props.id)
            }}
            />
            {this.props.task}
        </p>
        )
    }
}

class App extends React.Component {
    constructor(){
        super()
        this.state ={
            todos: toDoLists
        }
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(id) {
        console.log("Changed", id)
    }
    render() {
        const todoItems = this.state.todos.map(function(item){
            return(
                <Main
                    key={item.id} task={item.task} completed={item.completed} id={item.id}
                    handleChange={this.handleChange}
                />
                )
            
            })
        return (
            <div className="col-md-4 bg-dark container mt-5 p-3">
                {todoItems}
            </div>
            
        )
    }
}

ReactDOM.render(
    <App/>, document.getElementById("root")
)

reactjs

0 commentaires

3 Réponses :

0
votes

Lors du rendu du composant, procédez comme suit: handleChange = {(id) => this.handleChange (id)} et lorsque vous souhaitez exécuter la fonction dans ce composant, faites this.props.handleChange (this.props.id)

0 commentaires

1
votes

Le problème est dans la déclaration de votre composant App . Une classe qui étend React.Component reçoit props dans le constructeur, vous devez passer cette variable props à super () pour appeler correctement le parent class (React.Component), quelque chose comme ceci:

  const todoItems = this.state.todos.map((item) => (
    <Main
      key={item.id}
      task={item.task}
      completed={item.completed}
      id={item.id}
      handleChange={this.handleChange}
    />
  ));
  //rest of your code

Je vois aussi un problème dans .map soit lier cette fonction

  const todoItems = this.state.todos.map(function(item){
    return(
      <Main
        key={item.id}
        task={item.task}
        completed={item.completed}
        id={item.id}
        handleChange={this.handleChange}
      />
    )
   }.bind(this))
  //rest of your code

0 commentaires

1
votes

 onChange={props => {
            this.props.handleChange(this.props.id);
          }}

0 commentaires