javascript - 表在表内 react

我有一个表，其中包含reactjs中的另一个表。我在外部表的每一行中插入了一个按钮，当我单击此按钮时，我触发了一个用于显示嵌套表的操作。我的代码是这样的：

{slipsList.map((slip, i) =>
              <tbody>
                <tr key={i}>
                  <td className="table-sticky--first-col">
                    {slip.confirmationDate}
                    <button
                      type="button"
                      onClick={() => hideButtonClicked()}
                    >{i}</button>
                  </td>
                  <td>
                    {slip.slipNumber}
                  </td>
                  <td>
                    {slip.country}
                  </td>
                  <td>
                    {slip.side}
                  </td>
                  <td>
                    {slip.grossAmount}
                  </td>
                  <td>
                    {slip.commission}
                  </td>
                  <td>
                    {slip.feesPerStampDuty}
                  </td>
                  <td>
                    {slip.tax}
                  </td>
                  <td>
                    {slip.netAmount}
                  </td>
                  <td>
                    {slip.netAmountEuro}
                  </td>
                </tr>
                <tr
                  className={classnames({ hide_element: slipsHide })}
                >
                  <td colSpan="10">
                    {renderInside(slip)}
                  </td>
                </tr>
              </tbody>
            )}

用户单击一行中的按钮时，该行必须折叠。我的问题是在我的实现中，当我单击按钮时，表的所有行都折叠了。我的renderInside函数如下：

<tbody>
          <tr>
            <td>
              {renderInstrumentInfo(slip.prodType,
              slip.symbol, slip.exchange,
              slip.country, slip.name)}
            </td>
            <td>{slip.type}</td>
            <td>{slip.quantity}</td>
            <td>{slip.price}</td>
            <td>{slip.amount}</td>
          </tr>
        </tbody>

有任何想法吗？

最佳答案

传递要显示或隐藏的行的索引将有所帮助

设置onClick方法并像这样传递索引

<button
  type="button"
  onClick={() => hideButtonClicked(i)}
>{i}</button>

在redux mapDispatchToProps()中，传递一个参数以获取索引并传递它
喜欢

mapStateToProps = dispatch => (
      {hideButtonClicked: (index) => {
                dispatch(expandCollapseClicked('slips', index))
           }
      })

关于javascript - 表在表内 react ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43342273/