您可以管理每種類型挑戰的狀態，并僅在選擇一種挑戰時切換彈出窗口。我認為一次只能選擇一項挑戰。
class Challenge extends React.Component {
constructor(props) {
super(props);
this.state = {
isPopped: false,
selectedChallenge: ""
}
}
selectChallenge = (challengeName) => {
this.setState({
selectedChallenge: challengeName,
});
this.togglePopped();
}
togglePopped = () => {
this.setState({isPopped: !this.state.isPopped});
}
render() {
return <div>
{this.state.isPopped && <Dialog2 challenge={this.state.selectedChallenge} hideDialog={this.togglePopped}/>}
<div className="challanges">
<h1 className="newchallenge">Choose New Challange</h1>
<button className="challangeBtn" onClick={() => {
this.selectChallenge('Eat Vegetarian (31days ')
}}>
Eat Vegetarian (31days)
</button>
<button className="challangeBtn" onClick={() => {
this.selectChallenge('Take the bike to work (14days)')
}}>
Take the bike to work (14days)
</button>
<button className="challangeBtn" onClick={() => {
this.selectChallenge('Recycle your plastic bottles (31days)')
}}>
Recycle your plastic bottles (31days)
</button>
<button className="challangeBtn" onClick={() => {
this.selectChallenge('Use public transport to commute (31days)')
}}>
Use public transport to commute (31days)
</button>
<button className="challangeBtn" onClick={() => {
this.selectChallenge("Don't fly an airplane (365days)")
}}>
Don't fly an airplane (365days)
</button>
</div>
</div>;
}
}
class Dialog2 extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div class="dialog">
<h2>Dialog2</h2>
<div>{this.props.challenge}</div>
<button onClick={this.props.hideDialog}>Hide</button>
</div>
}
}
ReactDOM.render(<Challenge/>, document.querySelector('#root'))
.dialog {
width: 500px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
這是功能組件版本
function Challenge (props) {
const [isPopped, setIsPopped] = useState(false);
const [selectedChallenge, setSelectedChallenge] = useState("");
const selectChallenge = (challengeName) => {
setSelectedChallenge(challengeName);
togglePopped();
}
const togglePopped = () => {
setIsPopped(!isPopped);
}
return <div>
{isPopped && <Dialog2 challenge={selectedChallenge} hideDialog={togglePopped}/>}
<div className="challanges">
<h1 className="newchallenge">Choose New Challange</h1>
<button className="challangeBtn" onClick={() => {
selectChallenge('Eat Vegetarian (31days ')
}}>
Eat Vegetarian (31days)
</button>
<button className="challangeBtn" onClick={() => {
selectChallenge('Take the bike to work (14days)')
}}>
Take the bike to work (14days)
</button>
<button className="challangeBtn" onClick={() => {
selectChallenge('Recycle your plastic bottles (31days)')
}}>
Recycle your plastic bottles (31days)
</button>
<button className="challangeBtn" onClick={() => {
selectChallenge('Use public transport to commute (31days)')
}}>
Use public transport to commute (31days)
</button>
<button className="challangeBtn" onClick={() => {
selectChallenge("Don't fly an airplane (365days)")
}}>
Don't fly an airplane (365days)
</button>
</div>
</div>;
}
function Dialog2() {
return <div>
<h2>Dialog2</h2>
<div>{props.challenge}</div>
<button onClick={props.hideDialog}>Hide</button>
</div>
}
