- Когда в режиме рабочего стола и ноутбука (без боковой панели в родительском компоненте) работает взаимодействие мыши с кнопкой реакции начальной загрузки, когда я изменяю и добавляю боковую панель (из библиотеки реагирования на боковую панель), указатель мыши не распознает событие как кнопка больше. Вызов функций не является проблемой, потому что он работает тогда, когда здесь нет ответной боковой панели. Это происходит только с компонентом MyProfile.
-Есть ли способ заставить указатель мыши распознать кнопку как кнопку?
-Я пытался использовать z-index, но он не работает. Вот мой код компонента MyProfile:
<div key={this.props.loggedInUser.uid.toString()} >
<Well className="profileHeader"> <h1 className="headerOfMyProfile"> <span role="img" aria-label="icon">?</span> {this.props.loggedInUser.displayedName} </h1> </Well>
{this.state.urlOfImage !== ''?
<img alt="profileImage" className="profileImage" src={this.state.urlOfImage} /> : <img alt="profileImage" className="profileImage" src={require("./images/UserImage.png")} />}
<OverlayTrigger placement="bottom" overlay={tooltipForEditableImageOfUser}>
<Button key='editImageOfUser' onClick={this.showDialogForEditOfImageOfUser} className="buttonForEditableImageOfUser"> <Twemoji text="?️" /> </Button>
</OverlayTrigger>
<br /> <br />
<Table className={'tableToPutCeratinUserInfo'}>
<tr>
<td> <i> E-mail: </i> </td>
<td> <b> {this.props.loggedInUser.email} </b> </td>
</tr>
</Table>
<br/> <br/>
<OverlayTrigger placement="bottom" overlay={tooltipForProfileInformation}>
<Button key='editProfileInformation' placeholder="Izmenite profilne informacije" onClick={this.showModalForUpdateOfData} className="changeProfileInformation"> <span role="img" aria-label="icon">✏️</span> </Button>
</OverlayTrigger>
<OverlayTrigger placement="bottom" overlay={tooltipForPasswordInformation}>
<Button key='changePassword' placeholder="Izmenite lozinku" onClick={this.showModalForInsertionOfPasswordAgain} className="changePassword"><span role="img" aria-label="icon">?</span></Button>
</OverlayTrigger>
<Modal className="myProfileModal" show={this.state.showModalForUpdateOfData} >
<h3> <Twemoji text="ℹ️" /> Modifikovanje vaših podataka <Button onClick={this.cancelUpdateOfData} className="hideUpdateOfData"> <Twemoji text="❌" /> </Button> </h3>
<div className="messageForWarning"> <i className="warningMessageBeforeAddingANewAd"> <Twemoji text="⚠️" />Upozorenje: nakon promene podataka, morate se vratiti ponovo na karticu "Moj profil". </i> </div> <br/>
<Well>
<Form noValidate={true} horizontal={false}>
<FormGroup>
<Row sm={2}>
<h3> Unesite novi email: </h3>
<InputGroup>
<FormControl required inputRef={inputNewEmail => this.inputNewEmail = inputNewEmail} type="text" defaultValue={loggedInUser.email} />
</InputGroup>
<Button onClick={this.updateUserData}>Podnesi</Button>
</Row>
</FormGroup>
</Form>
</Well>
</Modal>
<Modal className="myProfileModal" show={this.state.showModalForInsertionOfPasswordAgain} >
<h3> <Twemoji text="ℹ️" /> Resetovanje lozinke <Button onClick={this.cancelTheResetOfPassword} className="hideResetPasswordModal"> <Twemoji text="❌" /> </Button> </h3> <br/>
<Well>
<Form noValidate={true} horizontal={false}>
<FormGroup>
<Row sm={2}>
<h3> Unesite novu lozinku: </h3>
<InputGroup>
<FormControl required inputRef={inputNewPassword => this.inputNewPassword = inputNewPassword} type="password" placeholder="Nova lozinka" />
<FormControl required inputRef={inputNewPasswordRepeat => this.inputNewPasswordRepeat = inputNewPasswordRepeat} type="password" placeholder="Ponovite novu lozinku" />
</InputGroup>
<Button onClick={this.resetThePassword}>Podnesi</Button>
</Row>
</FormGroup>
</Form>
</Well>
</Modal>
<Modal className="myProfileModal" show={this.state.notificationOfSuccessfulUpdateOfPassword} >
<h3> <Twemoji text="ℹ️" /> Uspešno resetovana lozinka! </h3>
<Well>
Uspešno ste resetovali lozinku!
</Well>
<Button onClick={this.hideNotificationOfSuccessfulUpdateOfPassword}>Ok</Button>
</Modal>
<Modal className="myProfileModal" show={this.state.notificationOfToShortNewPassword} >
<h3> <Twemoji text="⚠️" /> Prekratka lozinka! </h3>
<Well>
Lozinka mora da ima najmanje 6 karaktera!
</Well>
<Button onClick={this.hideNotificationOfToShortNewPassword}>Ok</Button>
</Modal>
<Modal className="myProfileModal" show={this.state.notificationOfToShortNewPassword} >
<h3> <Twemoji text="⚠️" /> Prekratka lozinka! </h3>
<Well>
Lozinka mora da ima najmanje 6 karaktera!
</Well>
<Button onClick={this.hideNotificationOfToShortNewPassword}>Ok</Button>
</Modal>
<Modal className="myProfileModal" show={this.state.notificationOfEmptyFields} >
<h3> <Twemoji text="⚠️" /> Polja ne smeju biti prazna! </h3>
<Well>
Morate popuniti sva polja!
</Well>
<Button onClick={this.hideNotificationOfEmptyFields}>Ok</Button>
</Modal>
<Modal className="myProfileModal" show={this.state.showNotificationOfWrongInsertedEmail} >
<h3> <Twemoji text="⚠️" /> E-mail nije unet u validnom svetu! </h3>
<Well>
E-mail morate uneti u ispravnom formatu!
</Well>
<Button onClick={this.hideNotificationOfWrongInsertedEmail}>Ok</Button>
</Modal>
<Modal className="myProfileModal" show={this.state.showAlertThatPasswordAreNotTheSame} >
<h3> <Twemoji text="⚠️" /> Lozinke moraju biti iste! </h3>
<Well>
Dve unete lozinke se moraju poklapati
</Well>
<Button onClick={this.hideAlertThatPasswordAreNotTheSame}>Ok</Button>
</Modal>
<Modal className="myProfileModal" show={this.state.showDialogForEditOfImageOfUser}>
<h3> <Twemoji text="?️" /> Izmenite profilnu sliku <Button onClick={this.hideDialogForEditOfImageOfUser} className="hideModalForEditAd"> <Twemoji text="❌" /> </Button> <br/></h3>
<div className="messageForWarning"> <i className="warningMessageBeforeAddingANewAd"> <Twemoji text="⚠️" />Upozorenje: ako ne želite promeniti sliku, morate uneti neku. Nakon unosa, morate se vratiti na karticu "Moj profil". </i> </div> <br/>
<Well>
<Form className="formGroupCreateAd" noValidate={false} horizontal>
<FormGroup>
<Col sm={2}>
Unesite novu sliku:
</Col>
<Col sm={5}>
<InputGroup>
<FormControl required accept=".jpeg, .jpg, .svg, .png" inputRef={inputUserImage => this.inputUserImage = inputUserImage} type="file" placeholder="Nova slika" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup className="buttonsForCreateAd">
<Row>
<Button className="confirmationOfAdANewAd" onClick={this.updateProfileImageOfUser}> Zapamti </Button>
<Button onClick={this.hideDialogForEditOfImageOfUser}> Otkaži </Button>
</Row>
</FormGroup>
</Form>
</Well>
</Modal>
</div>