Reactjs 写作时输入失去焦点

我是ReactJS的新用户，所以我不知道如何解决我的问题

我在弹出窗口中有一个输入。当这个弹出窗口显示时，当我在输入中写入时，它失去了焦点。 我做了一些搜索，发现可能是因为弹出窗口显示在render（）方法中。因此，我认为每次刷新时都会进行渲染。但我不知道如何将弹出显示放在render（）之外

我将console.log放在render（）方法中，每次显示console.log时都会失去焦点

我的代码：

render() {
let {imageLoading, videoLoading} = this.state;
    let {imagePreviewUrl} = this.state;
    let mediaPreview = null;
    let imagePreview = null;
    let videoPreview = null;
    let popup = null;
    let handleSubmit = null;
    let resetForm = null;
    Popup.close();
    if (imagePreviewUrl) {
        console.log('BDeGDE');
        mediaPreview = (
            <div>
                <img className={"img-fluid"} src={imagePreviewUrl} />
                <br/>
                <br/>
                <p>Vous pouvez ajouter un descriptif à votre photo :</p>
                <input style={{width: "100%"}} type={"text"} id={"text_descriptif_image"}/>
            </div>
        );
        handleSubmit = this._handleSubmit;
        resetForm = this._resetForm;
    }

    if (this.props._isAddingMedia) {
        console.log('EEDNE');
        if (mediaPreview) {
            popup = Popup.register({
                content: mediaPreview,
                buttons: {
                    left: [{
                        text: 'ANNULER',
                        className: 'btn btn-color-2 btn-outline-secondary btn-sm mr-2 float-left',
                        action: function () {
                            resetForm();
                            Popup.close();
                        }
                    }],
                    right: [{
                        text: 'ENVOYER',
                        className: 'btn btn-color-3 btn-sm float-right',
                        action: function () {
                            handleSubmit();
                            resetForm();
                            Popup.close();
                        }
                    }]
                }
            });
            Popup.queue(popup);
        }
    }

    return (
        <div>
            <div className={"text-left"}>
                <i onClick={this._handleImageAdd} className="mr-2 fa fa-picture-o fa-2x" aria-hidden="true"></i>
                <i onClick={this._handleVideoAdd} className="fa fa-video-camera fa-2x" aria-hidden="true"></i>
            </div>

            <form onSubmit={this._handleSubmit}>
                <input type="file" onChange={this._handleImageChange} accept="image/*" ref="fileImageUploader" style={{display: "none"}}/>
                <input type="file" onChange={this._handleVideoChange} accept="video/*" ref="fileVideoUploader" style={{display: "none"}}/>
            </form>
        </div>
    )
}

render（）{
设{imageLoading，videoLoading}=this.state；
设{imagePreviewUrl}=this.state；
让mediaPreview=null；
让imagePreview=null；
让videoPreview=null；
让popup=null；
让handleSubmit=null；
设resetForm=null；
Popup.close（）；
如果（imagePreviewUrl）{
console.log（'BDeGDE'）；
mediaPreview=(




您的照片如下：

);
handleSubmit=这个；
resetForm=此项。\u resetForm；
}
如果（此.props.\u为添加媒体）{
console.log（'EEDNE'）；
if（mediaPreview）{
popup=popup.register({
内容：mediaPreview，
按钮：{
左：[{
文本：“环空器”，
类名：“btn btn-color-2 btn轮廓辅助btn sm mr-2左侧浮动”，
行动：功能（）{
resetForm（）；
Popup.close（）；
}
}],
对:[{
文字：“特使”，
类名：“btn btn-color-3 btn sm右浮动”，
行动：功能（）{
handleSubmit（）；
resetForm（）；
Popup.close（）；
}
}]
}
});
Popup.队列（Popup）；
}
}
返回(
)
}

将弹出窗口添加为子组件，并在render return语句中呈现它。要了解如何创建子组件，请参阅将弹出窗口添加为子组件，并在render return语句中进行渲染。要知道如何创建子组件，请参考您的状态有问题，您必须使用“设置状态”更改它们。当您有状态时，您可以使用它们作为变量的备选方案，因为在React中，使用它们更容易。作为guid，您可以阅读以下内容：

如果在那之后你仍然遇到同样的问题，试着将弹出窗口和你想要执行它的组件分开（我是说创建只有弹出窗口的组件），并在你当前的组件中调用该组件。如果你知道状态和道具之间的区别，你可以做得很好！如果没有，请查看文档。很抱歉，我无法发布代码，因为我害怕做很多会让您困惑的事情

---

祝你好运：）

你的状态有问题，你必须用“设置状态”来更改它们。当您有状态时，您可以使用它们作为变量的备选方案，因为在React中，使用它们更容易。作为guid，您可以阅读以下内容：

如果在那之后你仍然遇到同样的问题，试着将弹出窗口和你想要执行它的组件分开（我是说创建只有弹出窗口的组件），并在你当前的组件中调用该组件。如果你知道状态和道具之间的区别，你可以做得很好！如果没有，请查看文档。很抱歉，我无法发布代码，因为我害怕做很多会让您困惑的事情

---

祝你好运：）

我这样做了，但我又失去了焦点。我发现这是因为弹出了.close（）；在上面的变量声明下面。所以我试着注释这一行，输入保持焦点，但当我点击cancel按钮时，弹出窗口.close（）；不要在这里工作。。。所以弹出的停留显示我这样做了，但我又失去了焦点。我发现这是因为弹出了.close（）；在上面的变量声明下面。所以我试着注释这一行，输入保持焦点，但当我点击cancel按钮时，弹出窗口.close（）；不要在这里工作。。。因此，弹出窗口将保持显示状态