Question

我在React中创建了一个动态手风琴，但当我点击标题时，所有手风琴都打开了。我想触发每个内容链接的每个手风琴。（我认为添加一个键可以完成这项工作，但是没有）。这是逻辑：在我的组件中，我映射了我的所有手风琴的标题，默认情况下手风琴被关闭。

    {mapObject(plans, (plan, level, index) => {
              const isHighlighted = highlighted === level
              const isNewPlan = newPlan === level
              const key = Date.now()

              return (

                          <PlanHeader
                              plan={plan}
                              hasApplicationFees={hasApplicationFees}
                              isNewPlan={isNewPlan}
                              onOpen={this.onOpen}
                              className={this.state.content}
                              key={key}
                              index={key}
                          />
                      { isShown && (
                          <React.Fragment>
                              <div className="quote-plan-wip__item">
                                  {planSubHeader(plan, getGuaranteesUrl(level))}
                              </div>
                              {mapObject(sortedGuarantees, (guarantees, type) => {
                                  return (
                                      <div
                                          className="quote-plan-wip__item mdl-grid"
                                          key={`plan-item-${level}-${type}`}
                                      >
                                          <div className="mdl-cell mdl-cell--6-col  mdl-cell--4-col-tablet">
                                              {rowHeader(type)}
                                          </div>
                                          <div className="mdl-cell mdl-cell--6-col  mdl-cell--4-col-tablet">
                                              {rowCell(guarantees[level])}
                                          </div>
                                      </div>
                                  )
                              })}
                          </React.Fragment>
                      )}
              )
          })}

当我点击按钮时，它会运行显示手风琴内容的函数onOpen。

  onOpen = () => {
  this.setState(
      {
          isShown: !this.state.isShown,
          content: this.state.content === "icon-down-dir" ? "icon-up-dir" : "icon-down-dir",
      }
  )

}

在我的标题手风琴组件中，我调用了我的函数：

<Cell className={className} onClick={onOpen} style={{textAlign: 'right'}} />

一切正常，这就是为什么没有jsfiddle，但我需要一个技巧来触发同一动态逻辑中每个内容的每个手风琴标题。

React纯手风琴触发每个id

0 个答案: