J'ai vu des problèmes similaires ici, mais je n'ai pas pu comprendre comment cela fonctionne. Nouveau dans les composants fonctionnels et React dans son ensemble.

Parent contient le Child, qui est un modal. Parent a un div qui déclenche l'affichage du modal Child, et le Child modal a un bouton close qui déclenche son masquage. Lorsque je clique sur le composant div dans Parent, je dois afficher et masquer le modal Child. Lorsque je clique sur le bouton close dans Child, je dois masquer le composant Child.

Le composant Parent :

import React, { useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [buttonState, setbuttonState] = useState({
    buttonState: false,
  });

  const onParentClick = (e) => {
    e.preventDefault();
    setbuttonState(!buttonState);
  };

  return (
    <div>
      <div onClick={onParentClick}></div>
      <Child isOpen={buttonState} onParentClick={onParentClick} />
    </div>
  );
};

export default Parent;

Le composant Enfant :

import React, { useState } from "react";

const Child = (props) => {
  const [buttonState, setButtonState] = useState({
    buttonState: props.isOpen,
  });

  const onChildClick = (e) => {
    e.preventDefault();
    setButtonState(false);
    props.onParentClick();
  };

  return (
    <div
      className={
        buttonState ? "child-modal-opened" : "child-modal-closed"
      }
    >
      <div onClick={onChildClick}>Close</div>
    </div>
  );
};

export default Child;

Pour une raison quelconque, je ne peux pas faire fonctionner cela Qu'est-ce que j'oublie ici?

0
Ruham 13 janv. 2021 à 23:26

2 réponses

Meilleure réponse

Il semble que useState() est utilisé de manière incorrecte.

const [buttonState, setbuttonState] = useState({
    buttonState: false,
  });

Entraîne buttonState { buttonState: false}, donc setbuttonState(!buttonState) ne fonctionne pas comme prévu.

Voici le composant Parent mis à jour avec useState(false) à la place (définissant la valeur initiale buttonState sur false)

import React, { useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [buttonState, setbuttonState] = useState(false);

  const onParentClick = (e) => {
    e.preventDefault();
    setbuttonState(!buttonState);
  };

  return (
    <div>
      <div onClick={onParentClick}></div>
      <Child isOpen={buttonState} onParentClick={onParentClick} />
    </div>
  );
};

export default Parent;

P.S.

Comme @Will l'a suggéré, il n'est pas nécessaire de créer un autre état dans Child, il peut être passé depuis Parent

import React, { useState } from "react";

const Child = (props) => {
  return (
    <div
      className={
        props.isOpen ? "child-modal-opened" : "child-modal-closed"
      }
    >
      <div onClick={props.onParentClick}>Close</div>
    </div>
  );
};
1
Vitalii 13 janv. 2021 à 20:43

Il semble que onParentClick est défini de manière à prendre un objet événement en tant que paramètre et à appeler preventDefault () là-dessus, mais vous l'appelez sans aucun argument. Est-ce que ça marche comme ça: props.onParentClick(e);?

0
Dom Eccleston 13 janv. 2021 à 20:37
65709273