J'essaie d'accéder à mon EventHandler qui a un identifiant de paramètre, mais j'obtiens cette erreur. J'ai essayé de réécrire le code mais j'ai la même erreur. Je reçois que je fais quelque chose de mal quand j'essaie d'appuyer l'identifiant, mais je ne suis pas sûr.
import React from "react";
import Props from "./props";
import ToDoData from "../ToDoData";
export default class App extends React.Component {
constructor() {
super();
this.state = {
todos: ToDoData
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(id) {
console.log("changed", id);
}
render() {
//Her henter du data, hvor du bruger mapping med map()
const ReturnToDo = this.state.todos.map(item => (
<Props key={item.id} todoItem={item} handleChange={this.handleChange} />
));
return (
<div>
<h1>Hello</h1>
{ReturnToDo}
</div>
);
}
}
5 Réponses :
Vos accessoires ici sont TooItem et vous accédez à élément dans le composant enfant.
mais le (item.id) a une propriété clé qui me confondre parce que je devais définir un accessoire clé avant son fonctionnement
@Dev_Jensen: Vous devez utiliser clé lorsque des éléments de rendu en tant que réseaux. Pouvez-vous élaborer sur ce qui vous confondu?
@Dev_Jensen La propriété est dans le composant parent, tout en itérant une liste, nous devons utiliser une propriété clé pour maintenir le caractère unique de l'itération.
Oubliez la clé ici, vous passez votre élément de tableau dans ( toDoItem Ici, vous devez donc accéder à ce accessoires
Vous devez modifier la fonction des accessoires à quelque chose comme ça puisque vous passez le formulaire d'objet parent comme un accessoire TODOITEM pour l'enfant.
import React from "react";
function Props(props) {
return (
<div>
<h3>
<input
type="checkbox"
checked={props.todoItem.completed}
onChange={() => props.handleChange(props.todoItem.id)}
/>
</h3>
<p> {props.todoItem.text} </p>
</div>
);
}
export default Props;
Vous pouvez utiliser comme ceci
Le problème est que vous passez De manière destructurée toDoItem à accessoires composant et accédant à élément au lieu de toDoItem .
sur l'événement OnChange, vous avez utilisé des accessoires indéfinis. Essayez ceci
Vous n'en passez pas d'un élément
article àProp . Le plus proche esttoDoItem .Changez votre ONCHANGE = {() => ProPs.Handlechange (ProPs.TodOitem.Id)}