React js change l'état du composant enfant du composant parent

J'ai deux composants: Composant parent à partir duquel je veux changer l'état du composant enfant:

class ParentComponent extends Component {
  toggleChildMenu() {
    ?????????
  }
  render() {
    return (
      <div>
        <button onClick={toggleChildMenu.bind(this)}>
          Toggle Menu from Parent
        </button>
        <ChildComponent />
      </div>
    );
  }
}

Et composant enfant :

class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false;
    }
  }

  toggleMenu() {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    return (
      <Drawer open={this.state.open}/>
    );
  }
}

Je dois soit changer l' état ouvert du composant enfant à partir du composant parent, soit appeler toggleMenu () du composant enfant à partir du composant parent lorsque l'utilisateur clique sur le bouton dans le composant parent?

L'état doit être géré dans le composant parent. Vous pouvez transférer la openvaleur vers le composant enfant en ajoutant une propriété.

class ParentComponent extends Component {
   constructor(props) {
      super(props);
      this.state = {
        open: false
      };

      this.toggleChildMenu = this.toggleChildMenu.bind(this);
   }

   toggleChildMenu() {
      this.setState(state => ({
        open: !state.open
      }));
   }

   render() {
      return (
         <div>
           <button onClick={this.toggleChildMenu}>
              Toggle Menu from Parent
           </button>
           <ChildComponent open={this.state.open} />
         </div>
       );
    }
}

class ChildComponent extends Component {
    render() {
      return (
         <Drawer open={this.props.open}/>
      );
    }
}

Le composant parent peut gérer l'état de l'enfant en passant un accessoire à l'enfant et l'enfant convertit cet accessoire en état à l'aide de componentWillReceiveProps.

class ParentComponent extends Component {
  state = { drawerOpen: false }
  toggleChildMenu = () => {
    this.setState({ drawerOpen: !this.state.drawerOpen })
  }
  render() {
    return (
      <div>
        <button onClick={this.toggleChildMenu}>Toggle Menu from Parent</button>
        <ChildComponent drawerOpen={this.state.drawerOpen} />
      </div>
    )
  }
}

class ChildComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false
    }
  }

  componentWillReceiveProps(props) {
    this.setState({ open: props.drawerOpen })
  }

  toggleMenu() {
    this.setState({
      open: !this.state.open
    })
  }

  render() {
    return <Drawer open={this.state.open} />
  }
}

La réponse ci-dessus est partiellement correcte pour moi, mais dans mon scénario, je souhaite définir la valeur sur un état, car j'ai utilisé la valeur pour afficher / basculer un modal. J'ai donc utilisé comme ci-dessous. J'espère que cela aidera quelqu'un.

class Child extends React.Component {
  state = {
    visible:false
  };

  handleCancel = (e) => {
      e.preventDefault();
      this.setState({ visible: false });
  };

  componentDidMount() {
    this.props.onRef(this)
  }

  componentWillUnmount() {
    this.props.onRef(undefined)
  }

  method() {
    this.setState({ visible: true });
  }

  render() {
    return (<Modal title="My title?" visible={this.state.visible} onCancel={this.handleCancel}>
      {"Content"}
    </Modal>)
  }
}

class Parent extends React.Component {
  onClick = () => {
    this.child.method() // do stuff
  }
  render() {
    return (
      <div>
        <Child onRef={ref => (this.child = ref)} />
        <button onClick={this.onClick}>Child.method()</button>
      </div>
    );
  }
}

Référence - https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542

Vous pouvez envoyer une prop du parent et l'utiliser dans le composant enfant afin de baser les changements d'état de l'enfant sur les modifications de prop envoyées et vous pouvez gérer cela en utilisant getDerivedStateFromProps dans le composant enfant.

Vous pouvez utiliser createRef pour modifier l'état du composant enfant à partir du composant parent. Voici toutes les étapes.

1. Créez une méthode pour modifier l'état dans le composant enfant.

   2 - Créez une référence pour le composant enfant dans le composant parent à l'aide de React.createRef ().

   3 - Attachez la référence au composant enfant en utilisant ref = {}.

   4 - Appelez la méthode du composant enfant en utilisant this.yor-reference.current.method.

Composant parent

class ParentComponent extends Component {
constructor()
{
this.changeChild=React.createRef()
}
  render() {
    return (
      <div>
        <button onClick={this.changeChild.current.toggleMenu()}>
          Toggle Menu from Parent
        </button>
        <ChildComponent ref={this.changeChild} />
      </div>
    );
  }
}

Composant enfant

class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false;
    }
  }

  toggleMenu=() => {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    return (
      <Drawer open={this.state.open}/>
    );
  }
}