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

    [React] Cambio default value in select dentro Modal

    ciao!

    dentro ad un bootrsap modal in una app react, faccio questo:
    codice:
    import * as React from "react";
    
    export default class UpdateModal extends React.Component {
    
        constructor(props) {
            super(props);
    
            this.state = {
                authors: [],
                editors: [],
                show: false,
                cTitolo: '',
                cPrezzo: '',
                cIsbn: '',
                cNote: '',
                selectedAu: '*',
                selectedEd: '*'
            };
    
            this.handleSaveBtnClick = this.handleSaveBtnClick.bind(this);
            this.caricato = this.caricato.bind(this);
        }
    
        async caricato() {
            await axios.get(AUTHORS_ALL)
                .then(res => {
                    this.setState({
                        authors: res.data.authors
                    });
                });
    
            await axios.get(EDITORS_ALL)
                .then(res => {
                    this.setState({
                        editors: res.data.editors
                    });
                });
    
            await this.setState({
                cTitolo: this.props.currentBook.title,
                cPrezzo: this.props.currentBook.price,
                cIsbn: this.props.currentBook.isbn,
                cNote: this.props.currentBook.note,
                selectedAu: this.props.currentBook.author_id,
                selectedEd: this.props.currentBook.editor_id
            });
            console.log(this.state.selectedAu);
        }
    
        render() {
            return (
                <Modal show={this.props.showModal} onEntered={this.caricato} onEscapeKeyDown={this.props.onClose}>
                    <Modal.Body>
                        <div className="form-group">
                            <label htmlFor="add_titolo">Titolo</label>
                            <input type="text" className="form-control" id="add_titolo"
                                   placeholder="Titolo" name="titolo" defaultValue={this.state.cTitolo}/>
                        </div>
                        <div className="form-group">
                            <label htmlFor="add_au">Autore</label>
                            <select className="custom-select" id="add_au" defaultValue={this.state.selectedAu}>
                                <option key={0} value="*">{"*"}</option>
                                {
                                    this.state.authors.map(au => (<option key={au.id} value={au.id}>{au.name}</option>))
                                }
                            </select>
                        </div>
                </Modal>
            );
        }
    }
    quando avvio il modal passo un oggetto dal parent.
    la input text viene correttamente valorizzata, mentre la select si riempie, ma non cambia valore.
    nel console.log compare il valore giusto, quindi lo state viene correttamente cambiato.
    non so come fare per dirgli di spostare la voce della select.

  2. #2
    per il momento ho trovato questa soluzione:
    codice:
    async caricato() {
        await axios.get(AUTHORS_ALL)
            .then(res => {
                this.setState({
                    authors: res.data.authors
                });
            }).then(function () {
    
            });
    
        await axios.get(EDITORS_ALL)
            .then(res => {
                this.setState({
                    editors: res.data.editors
                });
            });
    
        await this.setState({
            cTitolo: this.props.currentBook.title,
            cPrezzo: this.props.currentBook.price,
            cIsbn: this.props.currentBook.isbn,
            cNote: this.props.currentBook.note,
            selectedAu: this.props.currentBook.author_id,
            selectedEd: this.props.currentBook.editor_id
        });
    
        document.getElementById("add_au").value = this.state.selectedAu;
        document.getElementById("add_ed").value = this.state.selectedEd;
    }
    probabilmente non è la migliore in ambito react, ma funziona.
    si accettano suggerimenti ovviamente!

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