Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    [React] Problema con richiamo classe da button

    ciao!

    io ho questa classe che rappresenta un Modal:
    codice:
    import * as React from "react";
    import {Modal, Button} from 'react-bootstrap';
    
    export default class UpdateModal extends React.Component {
    
        constructor(props) {
            super(props);
            console.log(props);
    
            this.close = this.close.bind(this);
        }
    
        close() {
            this.setState({showModal: false});
        }
    
        render() {
            return (
                <Modal show={this.props.showModal} onHide={this.close}>
                    <Modal.Header closeButton>
                        <Modal.Title>Modal heading</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        {/*<h4>{this.state.upBookId}</h4>*/}
                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                        <h4>Popover in a modal</h4>
                        <hr/>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.close}>Close</Button>
                    </Modal.Footer>
                </Modal>
            );
        }
    }
    nella finestra principale ho fatto così:
    codice:
    .........
    import UpdateModal from './up_modal';
    
    
    export default class Home extends React.Component {
    
        constructor(props) {
            super(props);
    
            this.state = {
                books: [],
                showModal: false,
                upBookId: 0
            };
    
            this.open = this.open.bind(this);
        }
    
        open() {
            this.setState({showModal: true});
        }
    
        render() {
            return (
                <React.Fragment>
                
                   <Button
                        bsStyle="primary"
                        bsSize="large"
                        onClick={() => this.open}
                    >
                        Launch demo modal
                    </Button>
                    <UpdateModal show={this.state.showModal} />
    
                </React.Fragment>
            )
        }
    
    }
    il problema è che nn succede nulla.
    non da ne errori ne apre la finestra.
    idee??

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,654
    CIao, intanto puoi provare a settare direttamente true la propshow modal dalla Home e vedere se almeno appare. Il close dalla modale va a settare showModal del componente stesso ma in realtà la props sta nello state della home. Io sposterei quindi showModal nel componente stesso e gestire tutto da li. L'altrenativa è richiamare dal componente dialog la funzione per il cambio di showmodal (che starà in home)
    PS
    non ti serve avere 2 funzioni open/close, ne basterebbe una per invertire lo stato tipo:
    codice:
    this.setState({showModal: !this.state.showModal})

  3. #3
    ciao!

    si in effetti quelle funzioni sono ridondanti, le sistemo.

    per il modal, se faccio così si vede subito:
    codice:
    export default class UpdateModal extends React.Component {
    
        constructor(props) {
            super(props);
            console.log(props);
    
            this.close = this.close.bind(this);
        }
    
        close() {
            this.setState({showModal: false});
        }
    
        render() {
            return (
                <Modal show={true} onHide={this.close}>
                    <Modal.Header closeButton>
                        <Modal.Title>Modal heading</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        {/*<h4>{this.state.upBookId}</h4>*/}
                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                        <h4>Popover in a modal</h4>
                        <hr/>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.close}>Close</Button>
                    </Modal.Footer>
                </Modal>
            );
        }
    }
    quindi direttamente nella classe.

    ma se lo metto solo qui, dove lo dovrei richiamare, non funziona:
    codice:
    <UpdateModal show={true}/>

  4. #4
    certo, capito l'errore:

    codice:
    <UpdateModal showModal={this.state.showModal}/>
    passavo il nome della props sbagliata (show) rispetto a quella che cercavo nel modal (showModal).

    adesso funziona!

  5. #5
    ho un altro problema del quale mi sono accorto adesso:
    codice:
    import * as React from "react";
    import {Modal, Button} from 'react-bootstrap';
    
    export default class UpdateModal extends React.Component {
    
        constructor(props) {
            super(props);
    
            this.close = this.close.bind(this);
        }
    
        close() {
            this.setState({showModal: false});
        }
    
        render() {
            return (
                <Modal show={this.props.showModal} onHide={this.close}>
                    <Modal.Header closeButton>
                        <Modal.Title>Modal heading</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        {/*<h4>{this.state.upBookId}</h4>*/}
                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                        <h4>Popover in a modal</h4>
                        <hr/>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.close}>Close</Button>
                    </Modal.Footer>
                </Modal>
            );
        }
    }
    in pratica non si chiude.
    ma non capisco dove sto sbagliando.

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    783
    showModal è nello state della classe madre non di quella del modal (che non ha lo stato).

    In questo caso nelle props ti dovresti passare la funzione close() che però dovresti dichiarare nella classe madre.

    Con React sono alle prime armi anche io, quindi spero di non averti detto una castronata

  7. #7
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,654
    Ciao, se la funzione per variare lo stato sta nel parent la puoi passare come paramtro
    codice:
    <my-modal-component onClose="this.onClose" ....../>
    this.onClose è la tua funzione del parent, quella che modifica l'effettivo showModal

    In my-modal component

    codice:
    <button onClick="this.prop.onClose" ..../>

  8. #8
    perfetto, era come dicevate voi.

    unica cosa, la parentesi al posto delle virgolette nel passaggio delle props:
    codice:
    <UpdateModal showModal={this.state.showModalUp} onClose={this.closeModalUp}/>

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 © 2024 vBulletin Solutions, Inc. All rights reserved.