javascript - 具有相同状态名称的多个组件，在点击父 div 时更改一个而不影响其他组件？

Question

因此，我将尝试快速完成此操作，当我单击带有类名“问题”的 div 时，我希望我的图标从向上 Angular 变为向下 Angular ，反之亦然(还想让另一个 div 可见/无形的)。事情是，我目前正在使用 this.state.icon，所以当我点击一个问题时，所有其他问题的所有图标也会发生变化(与 . 这是我的代码:

class FAQ extends React.Component {

constructor() {
    super()
    this.state={
        showMe:true,
        icon:"angle-down"
    }
}

componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(prevState);
}

getReveal(event) {
    this.setState({
        showMe:!this.state.showMe,
        icon: this.state.icon === "angle-up" ? "angle-down" : "angle-up"
    })
}

render() {
    const { menu } = this.props;
    return (
            <div className={styles.container}>
                <div className={styles.category}>
                    <h2>Cat</h2>
                    <div className={styles.question}>
                        <p>Question 1 ?<FontAwesomeIcon className={styles.iconAngle} icon={this.state.icon} /></p>
                    </div>
                    {
                        this.state.showMe?
                    <div className={styles.answer}>
                        <h3 className={styles.titleAnswer}>Title 1</h3>
                        <p>Answer 1 </p>
                    </div>
                    :null
                    }</div>

                    <div className={styles.question} onClick={this.getReveal.bind(this)}>
                        <p>Question 2 ?<FontAwesomeIcon className={styles.iconAngle} icon={this.state.icon} /></p>
                    </div>
                    {
                        this.state.showMe?
                    <div className={styles.answer}>
                        <h3 className={styles.titleAnswer}>title 2</h3>
                        <p>Answer 2 </p>
                    </div>
                    :null
                    }</div>
    );
}

那么，我的问题是，如何更改图标并仅显示我单击的问题的答案？

在此先感谢您的帮助! :)

Answer 1

您可以通过将问题作为一个单独的组件，然后维护它们自己的状态来做到这一点。目前，所有问题都由单个状态参数控制，因此切换单个问题的显示/隐藏会影响所有其他问题。如果您将每个问题保留在其自己的组件中并在那里保持显示/隐藏状态，那么您将能够管理每个问题问题的独立状态。希望这会有所帮助。