React js mengubah status komponen anak dari komponen induk

Saya memiliki dua komponen: Komponen Induk tempat saya ingin mengubah status komponen anak:

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

Dan Komponen Anak :

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}/>
    );
  }
}

Saya perlu mengubah status terbuka Komponen Anak dari Komponen Induk, atau memanggil toggleMenu () Komponen Anak dari Komponen Induk saat Tombol di Komponen Induk diklik?

Status harus dikelola di komponen induk. Anda dapat mentransfer opennilai ke komponen anak dengan menambahkan properti.

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}/>
      );
    }
}

Komponen induk dapat mengelola status anak dengan meneruskan prop ke anak dan anak mengonversi prop ini dalam keadaan menggunakan 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} />
  }
}

Jawaban di atas sebagian benar untuk saya, tetapi dalam skenario saya, saya ingin menetapkan nilai ke status, karena saya telah menggunakan nilai untuk menampilkan / mengalihkan modal. Jadi saya telah menggunakan seperti di bawah ini. Semoga bisa membantu seseorang.

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>
    );
  }
}

Referensi - https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542

Anda dapat menggunakan createRef untuk mengubah status komponen anak dari komponen induk. Ini semua langkahnya.

1. Buat metode untuk mengubah status di komponen anak.

   2 - Buat referensi untuk komponen anak dalam komponen induk menggunakan React.createRef ().

   3 - Lampirkan referensi dengan komponen anak menggunakan ref = {}.

   4 - Panggil metode komponen anak menggunakan this.yor-reference.current.method.

Komponen induk

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>
    );
  }
}

Komponen Anak

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}/>
    );
  }
}

Anda dapat mengirim prop dari induk dan menggunakannya dalam komponen anak sehingga Anda akan mendasarkan perubahan status anak pada perubahan prop yang dikirim dan Anda dapat menangani ini dengan menggunakan getDerivedStateFromProps di komponen anak.