Reagieren Sie, um den Status der untergeordneten Komponente von der übergeordneten Komponente zu ändern

93

Ich habe zwei Komponenten: Übergeordnete Komponente, von der aus ich den Status der untergeordneten Komponente ändern möchte:

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

Und untergeordnete Komponente :

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

Ich muß entweder Änderung des Kindes Komponente offen Zustand von übergeordneter Komponente, oder rufen Sie untergeordnete Komponente des toggleMenu () von übergeordneter Komponente als Schaltfläche in Parent Component geklickt wird?

Torayeff
quelle
Vielleicht können Sie eine Kinderreferenz im Elternteil halten und den Zustand des Kindes explizit ändern. Siehe dieses Dokument
Chaojun Zhong

Antworten:

122

Der Status sollte in der übergeordneten Komponente verwaltet werden. Sie können den openWert auf die untergeordnete Komponente übertragen, indem Sie eine Eigenschaft hinzufügen.

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}/>
      );
    }
}
Olivier Boissé
quelle
Kann dies verwendet werden, um eine CSS-Eigenschaft wie 'display' zu steuern? Wie in, wenn meine Requisite 'open' entweder 'none' oder 'inline-block' enthält, wird die CSS-Display-Requisite aktualisiert?
Deusofnull
2
Ja, genau das macht das Paket "react-classnames", aber es ermöglicht Ihnen auch, immer eine Reihe von Klassennamen anzuwenden und andere bedingt anzuwenden. So: classNames({ foo: true, bar: this.props.open });// => 'foo' wenn this.props.open = false und 'foo bar' wenn this.props.open = true.
Deusofnull
1
Wie können wir den offenen Zustand in der untergeordneten Komponente ändern?
Priyabrata Atha
1
Sie können toggleder ChildComponent eine Eigenschaft hinzufügen <ChildComponent open={this.state.open} toggle={this.toggleChildMenu.bind(this)} />und this.props.toggle()die
untergeordnete
1
Ich verstehe nicht, Sie können es in der ChildComponent<ChildComponent toggle={this.toggleChildMenu.bind(this)} />
untergeordneten
25

Die übergeordnete Komponente kann den untergeordneten Status verwalten, indem eine Requisite an das untergeordnete Element übergeben wird, und das untergeordnete Element konvertiert diese Requisite mithilfe von componentWillReceiveProps in den Status.

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} />
  }
}
Miguel Savignano
quelle
1
in Reaktion 16 verwenden Sie getDerivedStateFromProps
Fadi Abo Msalam
1
@FadiAboMsalam Ich verwende React Version 16.7.0 mit @ Types / React Version 16.7.18. Zumindest auf der TypeScript-Seite scheint es keine zu geben getDerivedStateFromProps(). Miguels Antwortvorschlag zur Verwendung componentWillReceiveProps(props)ist jedoch verfügbar und hat in meinem Umfeld wie ein Zauber gewirkt.
Manfred
Wie würde in diesem Fall die Änderung des Status toggleMenu () innerhalb der untergeordneten Komponente das übergeordnete Element erreichen? Stellen Sie sich vor, ich schließe die Schublade. Woher weiß die übergeordnete Komponente, dass sie geschlossen wurde?
norman123123
20

Die obige Antwort ist für mich teilweise richtig, aber in meinem Szenario möchte ich den Wert auf einen Status setzen, da ich den Wert zum Anzeigen / Umschalten eines Modals verwendet habe. Also habe ich wie unten verwendet. Hoffe es wird jemandem helfen.

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

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

Jaison
quelle
2
Dies ist, was ich will, aber ich frage mich, warum nicht einfach React Refs verwenden? siehe doc
Chaojun Zhong
Was macht die onRef-Requisite?
norman123123
1

Sie können eine Requisite vom übergeordneten Element senden und in der untergeordneten Komponente verwenden, sodass Sie die Statusänderungen des untergeordneten Elements auf den gesendeten Requisitenänderungen basieren. Sie können dies mithilfe von getDerivedStateFromProps in der untergeordneten Komponente verarbeiten.

Juba Fourali
quelle
1

Mit createRef können Sie den Status der untergeordneten Komponente von der übergeordneten Komponente ändern. Hier sind alle Schritte.

  1. Erstellen Sie eine Methode, um den Status in der untergeordneten Komponente zu ändern.

    2 - Erstellen Sie mit React.createRef () eine Referenz für die untergeordnete Komponente in der übergeordneten Komponente.

    3 - Fügen Sie der Referenz eine Referenz mit der untergeordneten Komponente hinzu, indem Sie ref = {} verwenden.

    4 - Rufen Sie die untergeordnete Komponentenmethode mit this.yor-reference.current.method auf.

Übergeordnete Komponente


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

Untergeordnete Komponente


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


Pranay Kumar
quelle