Come passare dati ed eventi tra componenti in React

Articolo originale: How to Pass Data and Events Between Components in React

Se stai tentando di implementare operazioni CRUD utilizzando gli endpoint API, potresti scoprire che è difficile gestire i dati su più componenti.

O forse hai un modale, ma vuoi attivarlo da un componente diverso.

Capire come affrontare questi scenari può essere difficile.

In questo tutorial, ti mostrerò come puoi farlo.

Come passare i dati tra un componente padre e un componente figlio

In primo luogo, passiamo i dati tra un componente padre e un componente figlio. .

Innanzitutto, dovrai creare due componenti, un Parent e un Child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Successivamente, importerai il componente Child nel componente Parent e lo restituirai.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Quindi creerai una funzione e un pulsante per attivare quella funzione. Inoltre, creerai uno stato utilizzando l'Hook useState  per gestire i dati.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Come puoi vedere qui, stiamo chiamando la funzione parentToChild sul pulsante Click Parent . Quando si fa clic sul pulsante Parent, esso memorizzerà "This is data from Parent Component to the Child Component" nella variabile data .

Passiamo ora lo stato dei dati ai nostri componenti figlio. Puoi farlo usando i props.

Passa i dati come props quando chiami il componente figlio, in questo modo:

<Child parentToChild={data}/>

Qui stiamo passando i dati nel componente figlio come data .

data è il dato che dobbiamo trasmettere, e parentToChild è il nome del prop.

Successivamente, è il momento di acquisire i dati nel componente figlio. Ed è molto semplice.

Qui, ci possono essere due casi.

Caso 1: se stai utilizzando un componente funzionale, prendi semplicemente parentToChild nei parametri.

import React from 'react'

export default function Child({parentToChild}) {
    return (
        <div>
            {parentToChild}
        </div>
    )
}

Caso 2: se hai un componente di classe, usa semplicemente this.props.parentToChild.

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        return (
            <div>
                {this.props.parentToChild}
            </div>
        )
    }
}

In ogni caso, otterrai gli stessi risultati:

Quando facciamo clic sul pulsante Click Parent, vedremo i dati come output sullo schermo.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child parentToChild={data}/>
      
      <div className="child">
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Sopra vedrai il codice completo per Parent Component.

Come passare i dati tra un componente figlio e un componente padre

Questo è un po' più complicato.

Innanzitutto, devi creare una funzione nel componente padre chiamata   childToParent e uno stato vuoto chiamato data.

const [data, setData] = useState('');

const childToParent = () => {
   
}

Quindi, passa la funzione childToParent come supporto al componente figlio.

<Child childToParent={childToParent}/>

Ora, nel nostro componente figlio, accetta questa chiamata di funzione come prop e assegnala a un evento onClick.

Inoltre, dichiara uno stato che contiene alcuni dati sotto forma di stringa o numero.

Passa i dati nella funzione parentToChild come parametri.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    const data = "This is data from Child Component to the Parent Component."
    return (
        <div>
            <Button primary onClick={() => childToParent(data)}>Click Child</Button>
        </div>
    )
}

Successivamente, nel componente padre, accetta questi dati nella funzione childToParent come parametro. Quindi imposta i dati usando l'hook useState.

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
      <div>
        <Child/>
      </div>
    </div>
  );
}

export default Parent;

Quindi, mostra quella variabile di dati nella funzione di ritorno.

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
     {data}
      <div>
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

I dati figlio sovrascriveranno i dati padre quando si fa clic sul pulsante  Click Child .

Ora puoi passare i dati da Child a Parent e da Parent a Child come un professionista.

Puoi anche trasmettere eventi come onClick o OnChange

Basta chiamare un metodo di avviso nella funzione childToParent e passare quella funzione come supporto al componente figlio .

import './App.css';
import Child from './Child';

function Parent() {
  const childToParent = () => {
    alert("This is an alert from the Child Component")
  }

  return (
    <div className="App">
      <div className="child">
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

E nel componente figlio , accetta la funzione childToParent come prop. Quindi assegnalo a un evento onClick su un pulsante.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    return (
        <div>
            <Button primary onClick={() => childToParent()}>Click Child</Button>
        </div>
    )
}

La tua funzione nel componente padre verrà richiamata quando fai clic sul pulsante nel componente figlio e vedrai questo avviso:

Questo è tutto!

Puoi trovare il codice su Github se vuoi ulteriormente sperimentare.

Bene, questo è tutto gente. Buon apprendimento.