Come aggiornare lo stato dei genitori in React?

La mia struttura ha il seguente aspetto:

Component 1  

 - |- Component 2


 - - |- Component 4


 - - -  |- Component 5  

Component 3

Il componente 3 dovrebbe visualizzare alcuni dati a seconda dello stato del componente 5. Dato che gli oggetti di scena sono immutabili, non posso semplicemente salvare il suo stato nel componente 1 e inoltrarlo, giusto? E sì, ho letto su Redux, ma non voglio usarlo. Spero che sia possibile risolverlo solo con reagire. Ho sbagliato?

Per la comunicazione bambino-genitore è necessario passare una funzione che imposta lo stato da genitore a figlio, in questo modo

class Parent extends React.Component {
  constructor(props) {
    super(props)

    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      someVar: 'some value'
    })
  }

  render() {
    return <Child handler = {this.handler} />
  }
}

class Child extends React.Component {
  render() {
    return <Button onClick = {this.props.handler}/ >
  }
}

In questo modo il bambino può aggiornare lo stato del genitore con la chiamata di una funzione passata con oggetti di scena.

Ma dovrai ripensare la struttura dei tuoi componenti, perché come ho capito i componenti 5 e 3 non sono correlati.

Una possibile soluzione è di avvolgerli in un componente di livello superiore che conterrà lo stato di entrambi i componenti 1 e 3. Questo componente imposterà lo stato di livello inferiore attraverso i puntelli.

Ho trovato la seguente soluzione di lavoro per passare l'argomento della funzione onClick dal figlio al componente padre:

Versione con passaggio a method ()

//ChildB component
class ChildB extends React.Component {

    render() {

        var handleToUpdate  =   this.props.handleToUpdate;
        return (<div><button onClick={() => handleToUpdate('someVar')}>
            Push me
          </button>
        </div>)
    }
}

//ParentA component
class ParentA extends React.Component {

    constructor(props) {
        super(props);
        var handleToUpdate  = this.handleToUpdate.bind(this);
        var arg1 = '';
    }

    handleToUpdate(someArg){
            alert('We pass argument from Child to Parent: ' + someArg);
            this.setState({arg1:someArg});
    }

    render() {
        var handleToUpdate  =   this.handleToUpdate;

        return (<div>
                    <ChildB handleToUpdate = {handleToUpdate.bind(this)} /></div>)
    }
}

if(document.querySelector("#demo")){
    ReactDOM.render(
        <ParentA />,
        document.querySelector("#demo")
    );
}

Guarda JSFIDDLE

Versione con passaggio di una funzione Freccia

//ChildB component
class ChildB extends React.Component {

    render() {

        var handleToUpdate  =   this.props.handleToUpdate;
        return (<div>
          <button onClick={() => handleToUpdate('someVar')}>
            Push me
          </button>
        </div>)
    }
}

//ParentA component
class ParentA extends React.Component { 
    constructor(props) {
        super(props);
    }

    handleToUpdate = (someArg) => {
            alert('We pass argument from Child to Parent: ' + someArg);
    }

    render() {
        return (<div>
            <ChildB handleToUpdate = {this.handleToUpdate} /></div>)
    }
}

if(document.querySelector("#demo")){
    ReactDOM.render(
        <ParentA />,
        document.querySelector("#demo")
    );
}

Guarda JSFIDDLE

Voglio ringraziare la risposta più votata per avermi dato l'idea del mio problema fondamentalmente la sua variazione con la funzione freccia e il passaggio del parametro dal componente figlio:

 class Parent extends React.Component {
  constructor(props) {
    super(props)
    // without bind, replaced by arrow func below
  }

  handler = (val) => {
    this.setState({
      someVar: val
    })
  }

  render() {
    return <Child handler = {this.handler} />
  }
}

class Child extends React.Component {
  render() {
    return <Button onClick = {() => this.props.handler('the passing value')}/ >
  }
}

Spero che aiuti qualcuno.

Mi piace la risposta per quanto riguarda le funzioni di passaggio, è una tecnica molto utile.

Il rovescio della medaglia è anche possibile ottenere questo risultato utilizzando pub / sub o utilizzando una variante, un dispatcher, come fa Flux . La teoria è super semplice: il componente 5 invia un messaggio per il componente 3 in ascolto. Il componente 3 aggiorna quindi il suo stato che attiva il rendering. Ciò richiede componenti con stato, che, a seconda del punto di vista, possono essere o meno un anti-pattern. Sono contro di loro personalmente e preferirei che qualcos'altro stia ascoltando le spedizioni e cambi lo stato dall'alto verso il basso (Redux fa questo, ma aggiunge una terminologia aggiuntiva).

import { Dispatcher } from flux
import { Component } from React

const dispatcher = new Dispatcher()

// Component 3
// Some methods, such as constructor, omitted for brevity
class StatefulParent extends Component {
  state = {
    text: 'foo'
  } 

  componentDidMount() {
    dispatcher.register( dispatch => {
      if ( dispatch.type === 'change' ) {
        this.setState({ text: 'bar' })
      }
    }
  }

  render() {
    return <h1>{ this.state.text }</h1>
  }
}

// Click handler
const onClick = event => {
  dispatcher.dispatch({
    type: 'change'
  })
}

// Component 5 in your example
const StatelessChild = props => {
  return <button onClick={ onClick }>Click me</button> 
}

I bundle del dispatcher con Flux sono molto semplici, registra semplicemente i callback e li invoca quando si verifica un dispacciamento, passando attraverso i contenuti del dispatch (nell'esempio precedente sopra non c'è nessun payloadcon il dispatch, semplicemente un ID messaggio). Potresti adattare questo al pub / sub tradizionale (ad es. Usando EventEmitter dagli eventi, o qualche altra versione) molto facilmente se questo ha più senso per te.

Ho trovato la seguente soluzione di lavoro per passare l'argomento della funzione onClick da figlio al componente padre con param:

classe genitore:

class Parent extends React.Component {
constructor(props) {
    super(props)

    // Bind the this context to the handler function
    this.handler = this.handler.bind(this);

    // Set some state
    this.state = {
        messageShown: false
    };
}

// This method will be sent to the child component
handler(param1) {
console.log(param1);
    this.setState({
        messageShown: true
    });
}

// Render the child component and set the action property with the handler as value
render() {
    return <Child action={this.handler} />
}}

classe per bambini:

class Child extends React.Component {
render() {
    return (
        <div>
            {/* The button will execute the handler function set by the parent component */}
            <Button onClick={this.props.action.bind(this,param1)} />
        </div>
    )
} }

Quando mai hai bisogno di comunicare tra figlio e genitore a qualsiasi livello verso il basso, allora è meglio usare il contesto . Nel componente genitore definire il contesto che può essere invocato dal figlio come

Nel componente padre nel tuo caso componente 3

static childContextTypes = {
        parentMethod: React.PropTypes.func.isRequired
      };

       getChildContext() {
        return {
          parentMethod: (parameter_from_child) => this.parentMethod(parameter_from_child)
        };
      }

parentMethod(parameter_from_child){
// update the state with parameter_from_child
}

Ora nel componente figlio (componente 5 nel tuo caso), basta dire a questo componente che vuole usare il contesto del suo genitore.

 static contextTypes = {
       parentMethod: React.PropTypes.func.isRequired
     };
render(){
    return(
      <TouchableHighlight
        onPress={() =>this.context.parentMethod(new_state_value)}
         underlayColor='gray' >   

            <Text> update state in parent component </Text>              

      </TouchableHighlight>
)}

puoi trovare il progetto Demo al repository

Sembra che possiamo solo trasmettere i dati da padre a figlio poiché la reazione promuove il flusso di dati unidirezionale, ma per fare in modo che il genitore si aggiorni quando succede qualcosa nel suo "componente figlio", generalmente usiamo quella che viene chiamata "funzione di richiamata".

Passiamo la funzione definita nel genitore al figlio come "oggetti di scena" e chiamiamo quella funzione dal figlio attivandola nel componente genitore.

class Parent extends React.Component {
  handler = (Value_Passed_From_SubChild) => {
    console.log("Parent got triggered when a grandchild button was clicked");
    console.log("Parent->Child->SubChild");
    console.log(Value_Passed_From_SubChild);
  }
  render() {
    return <Child handler = {this.handler} />
  }
}
class Child extends React.Component {
  render() {
    return <SubChild handler = {this.props.handler}/ >
  }
}
class SubChild extends React.Component { 
  constructor(props){
   super(props);
   this.state = {
      somethingImp : [1,2,3,4]
   }
  }
  render() {
     return <button onClick = {this.props.handler(this.state.somethingImp)}>Clickme<button/>
  }
}
React.render(<Parent />,document.getElementById('app'));

 HTML
 ----
 <div id="app"></div>

In questo esempio possiamo far passare i dati da SubChild -> Child -> Parent passando la funzione al suo Child diretto.

Ho usato molte volte la risposta più votata da questa pagina, ma durante l'apprendimento di React ho trovato un modo migliore per farlo, senza legatura e senza funzione incorporata all'interno dei puntelli.

Guarda qui:

class Parent extends React.Component {

  constructor() {
    super();
    this.state={
      someVar: value
    }
  }

  handleChange=(someValue)=>{
    this.setState({someVar: someValue})
  }

  render() {
    return <Child handler={this.handleChange} />
  }

}

export const Child = ({handler}) => {
  return <Button onClick={handler} />
}

Il tasto è in una funzione freccia:

handleChange=(someValue)=>{
  this.setState({someVar: someValue})
}

Puoi leggere di più qui . Spero che questo sia utile per qualcuno =)

-Possiamo creare ParentComponent e con il metodo handleInputChange per aggiornare lo stato ParentComponent. Importa ChildComponent e passiamo due oggetti di scena dal componente genitore al componente figlio, ad esempio la funzionehandleInputChange e contiamo.

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.state = {
      count: '',
    };
  }

  handleInputChange(e) {
    const { value, name } = e.target;
    this.setState({ [name]: value });
  }

  render() {
    const { count } = this.state;
    return (
      <ChildComponent count={count} handleInputChange={this.handleInputChange} />
    );
  }
}

• Ora creiamo il file ChildComponent e salviamo come ChildComponent.jsx. Questo componente è apolide perché il componente figlio non ha uno stato. Utilizziamo la libreria dei tipi di prop per il controllo del tipo di prop.

  import React from 'react';
  import { func, number } from 'prop-types';
  
  const ChildComponent = ({ handleInputChange, count }) => (
    <input onChange={handleInputChange} value={count} name="count" />
  );
  
  ChildComponent.propTypes = {
    count: number,
    handleInputChange: func.isRequired,
  };
  
  ChildComponent.defaultProps = {
    count: 0,
  };
  
  export default ChildComponent;

Se questo stesso scenario non è diffuso ovunque, è possibile utilizzare il contesto di React, specialmente se non si desidera introdurre tutto il sovraccarico introdotto dalle librerie di gestione dello stato. Inoltre, è più facile da imparare. Ma fai attenzione, potresti abusarne e iniziare a scrivere codice errato. Fondamentalmente definisci un componente Container (che manterrà e manterrà quel pezzo di stato per te) rendendo tutti i componenti interessati a scrivere / leggere quel pezzo di dati suoi figli (non necessariamente indirizzare figli)

https://reactjs.org/docs/context.html

In alternativa, puoi anche utilizzare semplicemente React correttamente.

<Component5 onSomethingHappenedIn5={this.props.doSomethingAbout5} />

passare doSomethingAbout5 fino al componente 1

    <Component1>
        <Component2 onSomethingHappenedIn5={somethingAbout5 => this.setState({somethingAbout5})}/>
        <Component5 propThatDependsOn5={this.state.somethingAbout5}/>
    <Component1/>

Se questo è un problema comune, dovresti iniziare a pensare di spostare l'intero stato dell'applicazione in un altro posto. Hai alcune opzioni, le più comuni sono:

https://redux.js.org/

https://facebook.github.io/flux/

Fondamentalmente, invece di gestire lo stato dell'applicazione nel tuo componente, invii comandi quando succede qualcosa per ottenere lo stato aggiornato. I componenti estraggono anche lo stato da questo contenitore, quindi tutti i dati sono centralizzati. Questo non significa che non è più possibile utilizzare lo stato locale, ma questo è un argomento più avanzato.

quindi, se si desidera aggiornare il componente padre,

 class ParentComponent extends React.Component {
        constructor(props){
            super(props);
            this.state = {
               page:0
            }
        }

        handler(val){
            console.log(val) // 1
        }

        render(){
          return (
              <ChildComponent onChange={this.handler} />
           )
       }
   }


class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
             page:1
        };
    }

    someMethod = (page) => {
        this.setState({ page: page });
        this.props.onChange(page)
    }

    render() {
        return (
       <Button
            onClick={() => this.someMethod()} 
       > Click
        </Button>
      )
   }
}

Qui onChange è un attributo con il metodo "handler" associato alla sua istanza. abbiamo passato il gestore del metodo al componente della classe Child, per ricevere tramite la proprietà onChange l'argomento props.

L'attributo onChange verrà impostato in un oggetto props come questo:

props ={
onChange : this.handler
}

e passato al componente figlio

Quindi il componente Child può accedere al valore del nome nell'oggetto props come questo props.onChange

È fatto attraverso l'uso di oggetti di scena.

Ora il componente Child ha un pulsante "Click" con un evento onclick impostato per chiamare il metodo handler passato ad esso tramite onChnge nell'oggetto argomento props. Quindi ora this.props.onChange in Child contiene il metodo di output nella classe Parent Riferimenti e crediti: Bits and Pieces

Questo è il modo in cui lo faccio.

type ParentProps = {}
type ParentState = { someValue: number }
class Parent extends React.Component<ParentProps, ParentState> {
    constructor(props: ParentProps) {
        super(props)
        this.state = { someValue: 0 }

        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(value: number) {
        this.setState({...this.state, someValue: value})
    }

    render() {
        return <div>
            <Child changeFunction={this.handleChange} defaultValue={this.state.someValue} />
            <p>Value: {this.state.someValue}</p>
        </div>
    }
}

type ChildProps = { defaultValue: number, changeFunction: (value: number) => void}
type ChildState = { anotherValue: number }
class Child extends React.Component<ChildProps, ChildState> {
    constructor(props: ChildProps) {
        super(props)
        this.state = { anotherValue: this.props.defaultValue }

        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(value: number) {
        this.setState({...this.state, anotherValue: value})
        this.props.changeFunction(value)
    }

    render() {
        return <div>
            <input onChange={event => this.handleChange(Number(event.target.value))} type='number' value={this.state.anotherValue}/>
        </div>
    }
}

La maggior parte delle risposte fornite sopra riguarda progetti basati su React.Component. Se stai utilizzando useStatei recenti aggiornamenti della libreria React, segui questa risposta

<Footer 
  action={()=>this.setState({showChart: true})}
/>

<footer className="row">
    <button type="button" onClick={this.props.action}>Edit</button>
  {console.log(this.props)}
</footer>

Try this example to write inline setState, it avoids creating another function.