0
我在React中創建切換,並且在按下按鈕時它正在工作。我想要做的是將課程體在className="showcourses-field"
之外,因爲我想讓課程顯示在按鈕下方。當我把{coursebody}
放在div裏面的時候,但是當我把它放在div的外面時它不起作用。我怎麼能把它放在div之外?切換時在DIV外部放置內容會發生反應
JS
class ShowCourses extends React.Component {
constructor(){
super();
this.state= {
showingcourses: false
}
}
render(){
let courseBody;
let buttonText ="Show More Courses";
if (!this.state.showingcourses) {
courseBody = this.props.body;
} else {
courseBody = <Course coursename="Food" status="Progress" progress="43%" />
buttonText = "Hide courses";
}
return(
<div className="showcourses-field">
<button className="showbutton" onClick={this._toggleCourse.bind(this)}>{buttonText}</button>
{courseBody}
</div>
);
}
_toggleCourse(event){
event.preventDefault();
this.setState({
showingcourses: !this.state.showingcourses
});
}
}