React js thay đổi trạng thái của thành phần con từ thành phần mẹ

Tôi có hai thành phần: Thành phần chính mà từ đó tôi muốn thay đổi trạng thái của thành phần con:

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

Và thành phần con :

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

Tôi cần thay đổi trạng thái mở của Thành phần con từ Thành phần mẹ hoặc gọi toggleMenu () của Thành phần con từ Thành phần mẹ khi nhấp vào Nút trong Thành phần mẹ?

Trạng thái nên được quản lý trong thành phần mẹ. Bạn có thể chuyển opengiá trị cho thành phần con bằng cách thêm một thuộc tính.

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

Thành phần cha có thể quản lý trạng thái con chuyển một hỗ trợ cho con và thành phần con chuyển đổi trạng thái hỗ trợ này bằng cách sử dụng 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} />
  }
}

Câu trả lời trên đúng với tôi một phần, nhưng trong trường hợp của tôi, tôi muốn đặt giá trị thành một trạng thái, vì tôi đã sử dụng giá trị để hiển thị / chuyển đổi một phương thức. Vì vậy, tôi đã sử dụng như dưới đây. Hy vọng nó sẽ giúp ích cho ai đó.

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

Tài liệu tham khảo - https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542

Bạn có thể gửi một phần mềm hỗ trợ từ cha mẹ và sử dụng nó trong thành phần con để bạn sẽ thay đổi trạng thái của con dựa trên các thay đổi của phần tử con đã gửi và bạn có thể xử lý điều này bằng cách sử dụng getDerivedStateFromProps trong thành phần con.

Bạn có thể sử dụng createRef để thay đổi trạng thái của thành phần con từ thành phần mẹ. Đây là tất cả các bước.

1. Tạo một phương thức để thay đổi trạng thái trong thành phần con.

   2 - Tạo một tham chiếu cho thành phần con trong thành phần mẹ bằng cách sử dụng React.createRef ().

   3 - Đính kèm tham chiếu với thành phần con bằng ref = {}.

   4 - Gọi phương thức thành phần con bằng this.yor-reference.current.method.

Thành phần chính

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

Thành phần con

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