Невозможно редактировать форму в модальном html - PullRequest
Новая
       79

Невозможно редактировать форму в модальном html

0 голосов
/ 07 мая 2020

У меня проблема с редактированием bootstrap форм. Я установил значение по умолчанию и значение-заполнитель через js. Теперь, когда пользователь пытается изменить значение текстового поля, он не может.

Вот код для моего модального окна. 

 getData(){
        //gets data from our api and replaces the values of the inputfields down below
    }

    render() {
        this.getData();
        return(
            <div class="modal fade" id="ChangePwModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ChangePwModalModalLabel">Nutzer Details</h5>
                    <button type="button" id="PwModalClose" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form onSubmit={this.persDaten}>
                    <div className="input-group" id="inputgroop_changeemail">
                            <input type="text" className="form-control" id="neuesPw" name="dozMail" value= {getCookie("user")} required></input>
                    </div>

                    <div class="form-row" id="changename">
                            <div class="col">
                            <input type="text" id="VornameDoz" class="form-control" name="dozVorname" placeholder="Vorname"></input>
                            </div>
                            <div class="col">
                            <input type="text" id="NachnameDoz" class="form-control" name="dozNachname" placeholder="Nachname"></input>
                            </div>
                    </div>
                        <button className="btn btn-danger d-flex justify-content-center" type="submit" id="modalbuttonsredpd"> 
                            Pesönliche Daten ändern
                        </button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
                </div>
                </div>
            </div>
        </div>

        );
    }
};

export default ChangePwModal;

Большое спасибо.

1 Ответ

0 голосов
/ 07 мая 2020

Я предполагаю, что где-то здесь ... есть событие onChange ... которое запускает изменение состояния, когда что-то меняет текстовое поле ... В зависимости от того, как работает реакция, если вы измените состояние, оно вызовет RERENDER ... что означает, что он снова вызовет функцию render() ... а также "getData()", который снова изменит текстовое поле на то, что было изначально. Я рекомендую поместить this.getData(); НЕ В функцию render(), а лучше поместить его в componentDidMount()

...