无法在 html 模式中编辑表单答案

【问题标题】：Can't edit form in html modal无法在 html 模式中编辑表单
【发布时间】：2020-08-22 20:35:26
【问题描述】：

我在编辑引导表单时遇到问题。我通过 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;

非常感谢。

【问题讨论】：

我已经尝试复制我在该站点上使用的其他模态进行测试，但同样的问题
你能把你的代码放在codesandbox或jsfiddle中吗？以便我们更好地理解您的意思？
用 can't edit 你的意思是：不能点击它或不能输入任何文字？
@EmielZuurbier 我更新了问题希望现在更清楚了。
当我在文本字段中编辑文本时，它会被 getData() 中的值直接替换；

标签： javascript reactjs bootstrap-4 bootstrap-modal

【解决方案1】：

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

【讨论】：