-在台式机和笔记本电脑模式下（父组件中没有侧栏），鼠标与react bootstrap按钮的交互工作正常，当我更改并添加侧栏（来自react-sidebar库）时，鼠标指针没有事件识别它是按钮了。函数的调用不是问题，因为它在没有反应侧栏的情况下起作用。这仅在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>
答案 0 :(得分：0)
我需要在保存所有内容的div中添加position：relative，css，因为添加侧边栏后，内容将从其正常位置移至左侧，因此可能希望在该处放置处理程序。