[React] Chiamare un metodo di un altro componente

[fermat]

ciao!

io ho questo componente:

export default function DialogBook() {
    const [open, setOpen] = React.useState(false);

    function handleClickOpen() {
        setOpen(true);
    }

    function handleClose() {
        setOpen(false);
    }

    return (
        <div>
            <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
                <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        Aggiungi
                    </DialogContentText>
                    <TextField
autoFocus
                        margin="dense"
id="name"
label="Email Address"
type="email"
fullWidth
/>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} color="primary">
                        Cancel
                    </Button>
                    <Button onClick={handleClose} color="primary">
                        Subscribe
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

come so può evincere rappresenta una finestra di dialogo modale.
ora, dal componente principale devo richiamare questo componente e visualizzarlo.
in pratica dovrei richiamare handleClickOpen:

import DialogBook from "./dialog_book";

onClick: (event) => ......

una dritta???

[m4rko80]

Ciao, un po' difficile riuscire a scrivere tutto qui ... ad ogni modo ti converrebbe usare un componente di tipo classe e non funzione per fare cose un po' piu' complesse. Gli Hook che hai usato sono una funzionalità piuttosto recente comoda e utile se vuoi fare un qualcosa di dinamico senza utilizzare per forza una classe.
Ad ogni modo quello che vuoi fare ora è un componente comandato dall'esterno e dovresti quindi passargli delle property per determinare lo stato. Così com'à fatto ora se dovessi passare a

 <DialogBook open={true} />

ti darebbe un errore se dovessi assegnare il valore iniziale di useState() con questa props (errore per switch fra componente controllato e non controllato).


Di fatto non è corretto chiamare un metodo di un componente da un altro ma puoi gestire appunto gli stati passando delle property e aggiornare quindi i valori coi metodi di "lifeCycle" che React mette a disposizione in una classe.


Potresti quindi fare una cosa così (non riesco a scriverti tutto):

class DialogBook extends React.Component {
constructor(props){
  super(props);
  this.state = {
    open:false,
	//.....altre..
  }
}


componentDidMount(){
  this.setState({open: this.props.open})
}


componentDidUpdate(prevProps){
  if(prevProps.open !== this.props.open){
    this.setState({open: this.props.open})
  }
}


render(){
  return (
     <MyDialogComponent open={this.state.open} >
	 .......
	 </MyDialogComponent>
  )
}


}

.. sull'evento onClose del componente stesso chiamare una funzione interna per impostare a false state.open

[fermat]

ciao!

allora, ho modificato la classe come mi hai suggerito te:

class DialogBook extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            open: false
}
    }

    componentDidMount() {
        this.setState({open: this.props.open})
    }

    componentDidUpdate(prevProps) {
        if (prevProps.open !== this.props.open) {
            this.setState({open: this.props.open})
        }
    }

    render() {
        return (
            <div>
                <Dialog open={this.state.open} aria-labelledby="form-dialog-title">
                    <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            Aggiungi
                        </DialogContentText>
                        <TextField
autoFocus
                            margin="dense"
id="name"
label="Email Address"
type="email"
fullWidth
/>
                    </DialogContent>
                    <DialogActions>
                        <Button color="primary">
                            Cancel
                        </Button>
                        <Button color="primary">
                            Subscribe
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        )
    };
}

export default DialogBook;

poi dall'altro componente richiamo questa funzione:

function showDialog() {
    console.log('ok');
    return (
         <DialogBook open={true}/>
    )
}

in sostanza vedo il console.log, ma il dialog cmq non appare!

[fermat]

ciao!

non capisco perchè il mio precedente post risulta da moderare.

inoltre ho provato a scrivere in privato a due moderatori, ma pare che i miei messaggi privati non vengano inviati.

c'è qualche problema???

[ciro78]

Ciao,
ho letto il tuo privato solo ora. Ho riportato la notizia allo staff.

usa sempre i privati per questo genere di informazioni. Grazie

[Vincent.Zeno]

non capisco perché il mio precedente post risulta da moderare.
c'è qualche problema???

si: la piattolaforma.
non hai responsabilità nella questione

buon lavoro

[fermat]

Ciao,
ho letto il tuo privato solo ora. Ho riportato la notizia allo staff.

usa sempre i privati per questo genere di informazioni. Grazie

si l'ho fatto, ma mi dava sempre che non avevo messaggi inviati.
pensavo non inviasse anche quelli.

cmq ok, grazie per le risposte!

[Vincent.Zeno]

ma mi dava sempre che non avevo messaggi inviati.

devi selezionare l'opzione nelle impostazioni

[m4rko80]

Ciao, cosa intendi con "richiamo questa funzione". Il componente andrebbe diciamo renderizzato /incluso e quindi solitamente o hai un componente da richiamare così:

{myVar==1 && <DialogBox open={true}...../>}

oppure
[code]
Non so in quale momento devi richiamare il dialog senza vedere altro.
Per quanto riguarda la chiusura del DialogBox, cosi' ad occhio, non dovrebbe servire fare un controllo con didUpdate, solitamente i Dialog hanno eventi nativi tipo onClose o click al di fuori del dialog stesso. Con questo dovresti già poter resettare lo stato.

[fermat]

intendo che nel componente principale c'è un pulsante, che quando cliccato dovrebbe mostrare il dialog (che un componente modal).
quindi al click dovrebbe apparire quel modal, ma non appare.
in compenso appare il console.log, e quindi suppongo che quella funzione venga richiamata.

questo una parte del componente principale:

import React, {useEffect, useState} from 'react';
import MaterialTable from 'material-table';
import axios from 'axios';
import {BOOK_ALL} from "../config/config";
import DialogBook from "./dialog_book";

export default function Home() {

    .......................

    function showDialog() {
        console.log('ok');
        return (
            <DialogBook open={true}/>
        )
    }

    return (
        <MaterialTable
            ..............
            actions={[
                {
                    icon: 'add',
                    tooltip: 'Aggiungi libro',
                    isFreeAction: true,
                    onClick: (event) => showDialog()
                }
            ]}
            ........................
        />
    );
}

il DialogBook l'ho impostato come da tuo post precedente!