我是react.js的新手。这里有一个按钮，单击该按钮后，将打开一个下拉列表。
export default class NewCollapse extends Component {
constructor(props) {
super(props);
this.state = {
quizEnable: false,
viewEnable: false,
uploadEnable: false
}
}
EnableQuiz = () => {
this.setState({
quizEnable: true,
viewEnable: false,
uploadEnable: false
});
}
EnableView = () => {
this.setState({
quizEnable: false,
viewEnable: true,
uploadEnable: false
});
}
EnableUpload = () => {
this.setState({
quizEnable: false,
viewEnable: false,
uploadEnable: true
});
}
render() {
return (
<div class="container">
<div id="mainmenu" class="row">
<div class="list-group panel visible-md visible-lg">
<a href="#" class="list-group-item"><i class="glyphicon glyphicon-home"></i></a>
</div>
<div class="list-group panel">
<button href="#menupos1" data-toggle="collapse" data-parent="#mainmenu">Quick Action<span class="menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></button>
<div class="collapse pos-absolute" id="menupos1">
<a href="#submenu1" onClick={this.EnableQuiz} class="list-group-item sub-item" data-toggle={this.state.viewEnable === true ? "collapse" : "#"} data-parent="#submenu1">Quiz<span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
<div class="collapse list-group-submenu" id="submenu1">
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">
<img src={CreateNewQuizIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Create New</label>
</a>
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">
<img src={ViewQuizIcon} className="img-thumbnail menu-icons" />
<label className="list-component">View</label>
</a>
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">
<img src={EditQuizIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Update</label>
</a>
</div>
<a href="#submenu2" onClick={this.EnableView} class="list-group-item sub-item" data-toggle={this.state.viewEnable === true ? "collapse" : "#"} data-parent="#submenu2">View<span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
<div class="collapse list-group-submenu" id="submenu2">
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu2">
<img src={JobDescriptionIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Job Description</label>
</a>
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu2">
<img src={ResumeIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Resume</label>
</a>
</div>
<a href="#submenu3" onClick={this.EnableUpload} class="list-group-item sub-item" data-toggle={this.state.uploadEnable === true ? "collapse" : "#"} data-parent="#submenu3">Upload<span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
<div class="collapse list-group-submenu" id="submenu3" >
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu3">
<img src={UploadFolderIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Folder</label>
</a>
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu3">
<img src={UploadResumeIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Resume</label>
</a>
</div>
<a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">
<img src={DownloadTrackerIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Download Tracker</label>
</a>
<a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">
<img src={SelectionCriteriaIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Selection Criteria</label>
</a>
<a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">
<img src={RemoveIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Remove</label>
</a>
</div>
</div>
</div>
</div>
)
}
}
因此，在这里我想做的是有三个按钮，如果其中任何一个被折叠，其他按钮就不应该折叠。因此，对于每个崩溃，我都保持三个状态。现在，状态被更改，但是当我第一次单击时，状态没有被更改。
那么，我做错了什么？
有人可以帮我吗？
答案 0 :(得分：0)
由于您使用的是引导程序，因此我们真的没有简单的方法来更改提供给我们的折叠/显示功能。我们可以做的是通过一些条件渲染来解决它。
export default class NewCollapse extends React.Component {
constructor(props) {
super(props);
this.state = {
quizEnable: false,
viewEnable: false,
uploadEnable: false
};
}
enableQuiz = () => {
this.setState({
quizEnable: true,
viewEnable: false,
uploadEnable: false
});
};
enableView = () => {
this.setState({
quizEnable: false,
viewEnable: true,
uploadEnable: false
});
};
enableUpload = () => {
this.setState({
quizEnable: false,
viewEnable: false,
uploadEnable: true
});
};
render() {
return (
<div className="container">
<div id="mainmenu" className="row">
<div className="list-group panel visible-md visible-lg">
<a href="/" className="list-group-item">
<i className="glyphicon glyphicon-home" />
</a>
</div>
<div className="list-group panel">
<button
href="#menupos1"
data-toggle="collapse"
data-parent="#mainmenu"
>
Quick Action
<span className="menu-ico-collapse">
<i className="glyphicon glyphicon-chevron-down" />
</span>
</button>
<div className="collapse pos-absolute" id="menupos1">
<span
href="#submenu1"
onClick={this.enableQuiz}
className={
this.state.quizEnable
? "list-group-item sub-item"
: "list-group-item sub-item collapsed"
}
data-toggle="collapse"
data-parent="#submenu1"
aria-expanded={this.state.quizEnable}
>
Quiz
<span class=" menu-ico-collapse">
<i class="glyphicon glyphicon-chevron-down" />
</span>
</span>
<div
className={
this.state.quizEnable
? "list-group-submenu collapse show"
: "collapse list-group-submenu"
}
id="submenu1"
>
<a
href="#"
class="list-group-item sub-sub-item"
data-parent="#submenu1"
>
<img
src={CreateNewQuizIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Create New</label>
</a>
<a
href="#"
class="list-group-item sub-sub-item"
data-parent="#submenu1"
>
<img
src={ViewQuizIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">View</label>
</a>
<a
href="#"
class="list-group-item sub-sub-item"
data-parent="#submenu1"
>
<img
src={EditQuizIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Update</label>
</a>
</div>
<span
href="#submenu2"
onClick={this.enableView}
className={
this.state.viewEnable
? "list-group-item sub-item"
: "list-group-item sub-item collapsed"
}
data-toggle="collapse"
data-parent="#submenu2"
aria-expanded={this.state.viewEnable}
>
View
<span className=" menu-ico-collapse">
<i className="glyphicon glyphicon-chevron-down" />
</span>
</span>
<div
className={
this.state.viewEnable
? "list-group-submenu collapse show"
: "collapse list-group-submenu"
}
id="submenu2"
>
<a
href="#"
className="list-group-item sub-sub-item"
data-parent="#submenu2"
>
<img
src={{JobDescriptionIcon}}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Job Description</label>
</a>
<a
href="#"
className="list-group-item sub-sub-item"
data-parent="#submenu2"
>
<img
src={ResumeIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Resume</label>
</a>
</div>
<span
href="#submenu3"
onClick={this.enableUpload}
className={
this.state.uploadEnable
? "list-group-item sub-item"
: "list-group-item sub-item collapsed"
}
data-toggle="collapse"
data-parent="#submenu3"
aria-expanded={this.state.uploadEnable}
>
Upload
<span className=" menu-ico-collapse">
<i className="glyphicon glyphicon-chevron-down" />
</span>
</span>
<div
className={
this.state.uploadEnable
? "list-group-submenu collapse show"
: "collapse list-group-submenu"
}
id="submenu3"
>
<a
href="#"
className="list-group-item sub-sub-item"
data-parent="#submenu3"
>
<img
src={UploadFolderIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Folder</label>
</a>
<a
href="#"
className="list-group-item sub-sub-item"
data-parent="#submenu3"
>
<img
src={UploadResumeIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Resume</label>
</a>
</div>
<a
href="#"
data-toggle="collapse"
data-target="#menupos1"
className="list-group-item sub-item"
>
<img src={DownloadTrackerIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Download Tracker</label>
</a>
<a
href="#"
data-toggle="collapse"
data-target="#menupos1"
className="list-group-item sub-item"
>
<img src={SelectionCriteriaIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Selection Criteria</label>
</a>
<a
href="#"
data-toggle="collapse"
data-target="#menupos1"
className="list-group-item sub-item"
>
<img src={RemoveIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Remove</label>
</a>
</div>
</div>
</div>
</div>
);
}
}