Question

因此，当我使用className为“ question”的div单击div时，我希望我的图标从“向上倾斜”更改为“向下倾斜”，反之亦然（也希望使另一个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

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

具有相同状态名称的多个组件，在不影响其他组件的情况下更改其他onclick on parent div？

1 个答案: