Question

因此，当我使用className为“ question”的div单击div时，我希望我的图标从“向上倾斜”更改为“向下倾斜”，反之亦然（也希望使另一个div可见/不可见）。事情是，我当前正在使用this.state.icon，所以当我单击一个问题时，所有其他图标也都更改了图标（与显示内容相同）这是我的代码：

我在移动设备上，所以我制作了pastebin

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

在此先感谢您的帮助！：）

Answer 1

不确定这正是您要寻找的，但这是我的解决方法

class CommissionData extends Component {
  constructor() {
    super();

    this.showUpArrow = false;
  }

  onUpdateArrow =()=> {
    this.showUpArrow = !this.showUpArrow
  }

  ...your code
}

在这种方式，您可以更新您的图标和DIV不使用状态

Answer 2

Blockquote“事情是，我目前正在使用this.state.icon，因此当我单击一个问题时，所有其他图标也都更改了图标（与显示内容相同）”

问题在于每个问题都具有相同的状态。下面显示的块应该提取到其自己的组件中，并且应该在保持状态的那个组件中，该状态决定是否扩展问题。

然后，您可以在父容器中列出多个，例如<Question />组件，并提供每个问题/答案的文本。

<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}>
            <className={styles.titleAnswer}>Title 1</h3>
            <p>Answer 1 </p>
        </div>
        : null
    }
</div>

如何更改一个元素的状态而不影响具有相同状态的其他元素？

2 个答案: