React js, alt bileşenin durumunu üst bileşenden değiştirir

İki bileşenim var: Alt bileşenin durumunu değiştirmek istediğim Üst Bileşen :

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

Ve Alt Bileşen :

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

Ya değişime Çocuk Component'ın gerek açık Veli Bileşeni veya çağrı Çocuk Component'ın gelen devlet toggleMenu () Veli Bileşen Button tıklandığında Veli Bileşen'den?

Devlet, ana bileşende yönetilmelidir. openBir özellik ekleyerek değeri alt bileşene aktarabilirsiniz .

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

Üst bileşen, alt öğe durumunu alt öğeye geçirerek yönetebilir ve alt öğe, componentWillReceiveProps kullanarak bu pervaneyi duruma dönüştürür.

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

Yukarıdaki cevap benim için kısmen doğru, ancak benim senaryomda, değeri bir duruma ayarlamak istiyorum, çünkü değeri bir modeli göstermek / değiştirmek için kullandım. Bu yüzden aşağıdaki gibi kullandım. Umarım birine yardımcı olur.

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

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

Üst bileşenden alt bileşenin durumunu değiştirmek için createRef'i kullanabilirsiniz. İşte tüm adımlar.

1. Alt bileşendeki durumu değiştirmek için bir yöntem oluşturun.

   2 - React.createRef () kullanarak üst bileşendeki alt bileşen için bir referans oluşturun.

   3 - ref = {} kullanarak alt bileşene referans ekleyin.

   4 - this.yor-reference.current.method'u kullanarak alt bileşen yöntemini çağırın.

Üst bileşen

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

Alt Bileşen

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

Üst öğeden bir prop gönderebilir ve onu alt bileşende kullanabilirsiniz, böylece alt bileşenin durum değişikliklerini gönderilen öznitelik değişikliklerine dayandırırsınız ve bunu alt bileşende getDerivedStateFromProps kullanarak halledebilirsiniz .