Блог

Я новый пользователь ReactJS, поэтому я не могу понять, как решить мою проблему.

У меня есть ввод во всплывающем окне. Когда отображается это всплывающее окно и когда я пишу во входных данных, он потерял фокус. Я произвел некоторые поиски и обнаружил, что это, возможно, потому, что всплывающее окно отображается в методе render (). Поэтому я думаю, что он отображается при каждом обновлении. Но я не знаю, как я мог бы поместить всплывающее окно за пределы render ()

Я ставлю консоль.войдите в метод render (), и я терял фокус каждый раз, когда моя консоль.отображаются журналы.

Мой код :

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

Что-то не так с вашим состоянием, вы должны изменить их с помощью «setState». И когда у вас есть состояние, вы можете использовать их в качестве альтернативы для переменных, потому что в React работать с ними намного проще.В качестве guid вы можете прочитать это:

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

И если после этого у вас все еще возникает та же проблема, попробуйте отделить всплывающее окно и компонент, в котором вы хотите его выполнить (я имею в виду создать компонент, у которого будет только всплывающее окно) и вызвать этот компонент в вашем текущем компоненте.Если вы знаете разницу между состоянием и реквизитами, вы можете сделать это очень хорошо! Если нет, просто посмотрите документацию.Извините, я не могу опубликовать код, потому что я боюсь сделать много проблем, которые вас запутают.

Удачи 🙂

Добавьте всплывающее окно в качестве дочернего компонента и отобразите его в инструкции render return. Чтобы узнать, как создавать дочерние компоненты, обратитесь к https://reactjs.org/docs/components-and-props.html