Question

我是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>
    )
}

感谢您的帮助

Answer 1

将弹出窗口添加为子组件，并在render return语句中对其进行渲染。要了解如何创建子组件，请参阅https://reactjs.org/docs/components-and-props.html

Answer 2

您的状态有问题，您必须使用“ setState”进行更改。而且当您拥有状态时，可以将它们用作变量的替代方法，因为在React中使用它们要容易得多。作为向导，您可以阅读以下内容：

https://medium.freecodecamp.org/get-pro-with-react-setstate-in-10-minutes-d38251d1c781

如果之后仍然遇到相同的问题，请尝试将Popup和要执行该操作的组件分开（我的意思是创建仅具有Popup的组件），然后在当前组件中调用该组件。状态和道具之间的差异可以很好地做到！如果没有，请看一下文档。对不起，我无法发布代码，因为我害怕做很多会让您感到困惑的问题。

祝你好运：）

写作时输入失去焦点

2 个答案: