よくある質問のリストを表示する必要があり、質問の回答を非表示にする必要があります。質問をクリックすると、その特定の質問に対する回答が表示される必要があります。私の問題は、たくさんの質問があり、ボタンをクリックすると、その質問に対する特定の回答ではなく、すべての回答が表示されることです。
class Faqs extends Component {
constructor(props){
super(props);
this.state = {
isHidden: true
}
}
toggleHidden () {
this.setState({
isHidden: !this.state.isHidden
})
}
render() {
return (
<div>
<span onClick={() => this.toggleHidden()}><strong>This is the question</strong></span>
{!this.state.isHidden && <p>Answer for the question</p>} <br/>
<span onClick={() => this.toggleHidden()}><strong>Question2</strong></span>
{!this.state.isHidden && <p>Answer2</p>} <br/>
<hr></hr>
</div >
)
}
}
コンポーネントをもう1つのレベルに分割して、質問と対応する回答のみをレンダリングするサブコンポーネントを作成できます。質問と回答を小道具として渡します。このようにして、すべての質問に同じコンポーネントを使用できますが、すべての質問と回答のペアには独自の状態があります。
class Faq extends Component{
state = {isHidden: true}
toggleHidden = ()=>this.setState((prevState)=>({isHidden: !prevState.isHidden}))
render(){
return(
<div>
<span onClick={this.toggleHidden}>
<strong>{props.question}</strong></span>
{!this.state.isHidden && <p>{props.answer}</p>}
</div>
)
}
}
class Faqs extends Component {
render() {
return (
<div>
<Faq question={"Question 1"} answer={"answer 1"} />
<Faq question={"Question 2"} answer={"answer 2"} />
</div >
)
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加