无法在 html 模态中编辑表单

Question

我在编辑 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;

非常感谢。

Answer 1

我的猜测是这里某处...有一个 onChange 事件...当某些内容更改文本字段时会触发状态更改...随着反应的工作方式，如果您更改状态，它将导致 RERENDER ... 这意味着它将再次调用 render() 函数...以及 "getData()" 将文本字段再次更改为原来的状态。我的建议是将 this.getData(); 放在 render() 函数中，而不是放在 componentDidMount()

中

无法在 html 模态中编辑表单

Can't edit form in html modal

javascript

bootstrap-modal

reactjs

bootstrap-4