Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 11
  1. #1

    [React] Chiamare un metodo di un altro componente

    ciao!

    io ho questo componente:
    codice:
    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:
    codice:
    import DialogBook from "./dialog_book";
    
    onClick: (event) => ......
    una dritta???

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,623
    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
    codice:
     <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):
    codice:
    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
    Ultima modifica di m4rko80; 25-07-2019 a 17:56

  3. #3
    ciao!

    allora, ho modificato la classe come mi hai suggerito te:
    codice:
    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:
    codice:
    function showDialog() {
        console.log('ok');
        return (
             <DialogBook open={true}/>
        )
    }
    in sostanza vedo il console.log, ma il dialog cmq non appare!

  4. #4
    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???

  5. #5
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,211
    Ciao,
    ho letto il tuo privato solo ora. Ho riportato la notizia allo staff.

    usa sempre i privati per questo genere di informazioni. Grazie
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  6. #6
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,162
    Quote Originariamente inviata da fermat Visualizza il messaggio
    non capisco perché il mio precedente post risulta da moderare.
    c'è qualche problema???
    si: la piattolaforma.
    non hai responsabilità nella questione

    buon lavoro

  7. #7
    Quote Originariamente inviata da ciro78 Visualizza il messaggio
    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!

  8. #8
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,162
    Quote Originariamente inviata da fermat Visualizza il messaggio
    ma mi dava sempre che non avevo messaggi inviati.
    devi selezionare l'opzione nelle impostazioni

  9. #9
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,623
    Ciao, cosa intendi con "richiamo questa funzione". Il componente andrebbe diciamo renderizzato /incluso e quindi solitamente o hai un componente da richiamare così:
    codice:
    {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.

  10. #10
    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:
    codice:
    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!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.