Question

我有一个表，其中包含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>

有什么想法吗？

Answer 1

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

设置onClick方法并传递索引，如

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

在redux mapDispatchToProps()中，传递一个参数来获取索引并传递它像

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

Answer 2

原因是，您对所有行使用单bool，而不是使用array bool个值，每行的每个值，如下所示：

<tr
   className={classnames({ hide_element: slipsHide[i] })}
>

按钮的onClick仅更改特定的bool，而不是所有值。要更新特定值，您需要将每个项目的index传递到onClick方法，如下所示：

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

现在在index方法中使用此hideButtonClicked：

hideButtonClicked(index){
  //now update only slipsHide[index]
}

表内的表反应

2 个答案: