Je fais une liste de contacts où vous pouvez ajouter des contacts à vos favoris. Puis filtrez mes contacts préférés.
Tout d'abord, tous les contacts ont l'état donc ici, j'ajoute un contact à mes favoris: p> ContactName.js fort> p> contact.js strong> p> favoris.js fort>
Ceci est juste où le composant préféré est p> et voici où je veux pouvoir obtenir le ISFAverite: FALSE CODE>, puis je clique sur un contact, cliquez sur l'étoile qui définit isfavorite: true code>. Je ferme ce contact et cliquez sur le bouton Filtrer pour voir tous mes contacts préférés p> iSfavorite code> état. Ceci est le composant parent où le bouton de filtrage des contacts est. P> <React.Fragment>
<span
className="filter-button"
>Filtera favoriter</span>
<ul className="contacts">
{
this.props.contacts
.filter(this.handleSearchFilter(this.props.search))
.map(contact => (
<ContactName
key={contact.id}
contact={contact}
name={contact.name}
/>
))
}
</ul>
</React.Fragment>
3 Réponses :
Vous le faites dans la mauvaise direction.
Dans le réact, vous pouvez transmettre les données avec des accessoires (ou en utilisant le contexte qui n'est pas le cas ici). Donc, si vous avez besoin d'une donnée sur le composant ancêtre, les données doivent être des états / accessoires de cet ancêtre. P>
Dans votre cas, les données code> préférées cod> doivent être à l'intérieur du contacts code> (qui est défini comme des accessoires du nom de contact), et vous devez le transmettre au nom ContactName code> Comme d'autres accessoires. P> render() {
return (
<React.Fragment>
<li onClick={this.handleClick}>
{this.props.contact.name}
</li>
{
this.state.isOpen ?
<Contact
contact={this.props.contact}
close={this.handleClick}
favorite={this.props.handleFavorite}
isFavorite={this.props.isFavorite}
/>
: null
}
</React.Fragment>
)
}
Ça ne marche pas. Maintenant, chaque contact est ajouté aux favoris même si j'ai ajouté un contact. Ou ai-je manqué quelque chose
En réagissant, les composants parents ne doivent pas avoir accès à l'état de leur enfant. Au lieu de cela, vous devez déplacer votre contact .js maintenant le Isfavorite indiquer un niveau à votre ContactList Composant et transformez-le dans une liste ou une carte dans une liste ou une carte au lieu d'un booléen. guidonfavorite et isfavorite Les accessoires peuvent simplement être transmis au besoin sur votre composants enfants.
D'accord, j'ai réussi à obtenir l'État des enfants dans le parent. Mais maintenant, chaque fois que j'ajoute un nouveau contact à mes favoris, il crée de nouveaux objets - voir Codebox https: / /Codesandbox.io/embed/charMing-BoHR-RWD0R
Y a-t-il un moyen de masquer tous ces nouveaux objets créés dans un seul objet et de définir qu'un gros objet égal à un nouvel état appelé favoritecontacts = []?