Question

我有一个reactstrap Collapse组件，我正在尝试从外部toggle来state Button，该组件位于使用以下内容映射的循环中自定义状态变量。

我的问题：

当我将open方法的状态设为toggle到{{1}时，为什么只collapse而不openCollapse setState组件}？

我的代码：

!state.collapse

// some_items.js (brief example)

// State
this.state = {
  toggleCollapse: false
}

// my custom state variable that I want to have toggle
openCollapse(itemId) {
  this.setState(state => ({
    [`toggleCollapse-${itemId}`]: !state.collapse
  }));
}

// mapped item with button trigger for toggling the collapse
<div key={item.id>
  <Button
     onClick={() => {
        this.openCollapse(item.id);
      }}
  >
    View Listed Item Info
  </Button>
  //
  // Some extra content that belongs here in between..
  //
  <ItemInfoCollapse 
    show={this.state[`toggleCollapse-${item.id}`]}
    item={item}
  />
</div>

Answer 1

决定Collapse组件是打开还是关闭的原因是基于您从父组件传入的show道具。

除了openToggle函数中使用的状态变量-!state.collapse以外，似乎所有设置都正确设置。我在任何地方都没有看到collapse变量，这意味着它是未定义的，因此它实际上正在运行!undefined，该变量始终评估为true（可以在浏览器控制台中对其进行测试）。

我认为您的意思是!state[ toggleCollapse-$ {itemId} ]而不是!state.collapse

从自定义状态变量切换状态

1 个答案: