Question

Hey Stack OverFlow社区我正在研究一个React项目，我正在映射一组表行。在每个表行中，我有一个额外的行，其中包含有关每个行数据的更多信息。我的问题是，当我单击按钮以呈现该表的其他信息时，它会呈现所有行的所有其他信息。

我知道我的逻辑是以一种方式实现的，其中每一个额外的行都会在点击时显示。我该怎么做才能解决这个问题？

showDrawyer = () => {
    let {showDrawyer} = this.state
    this.setState({
        showDrawyer: !showDrawyer
    })
}

renderTableCellData = () => {
    let { tableData } = this.props;
    return tableData.map((data, index) => {
      return (
        <Table.Body>
        <Table.Row style={{ height: 75 }}>
             <Table.Cell onClick={this.showDrawyer}>{data.name}</Table.Cell>
             <Table.Cell>{data.number}</Table.Cell>
             <Table.Cell>{data.date}</Table.Cell>
             <Table.Cell>{data.uid}</Table.Cell>
        </Table.Row>
            <Table.Row style={{display: this.state.showDrawyer ? '' : 'none' }}>
          <Table.Cell>Hidden Row data</Table.Cell>
          </Table.Row>
        </Table.Body>
      )
    })
}

Answer 1

state={
    shownDrawerIndex:null
}    

showDrawyer = (index) => {
        this.setState({
           shownDrawerIndex:index
        })
    }

    renderTableCellData = () => {
        let { tableData } = this.props;
        return tableData.map((data, index) => {
          return (
            <Table.Body>
            <Table.Row style={{ height: 75 }}>
                 <Table.Cell onClick={()=>this.showDrawyer(index)}>{data.name}</Table.Cell>
                 <Table.Cell>{data.number}</Table.Cell>
                 <Table.Cell>{data.date}</Table.Cell>
                 <Table.Cell>{data.uid}</Table.Cell>
            </Table.Row>
                <Table.Row style={{display: this.state.shownDrawerIndex == index ? '' : 'none' }}>
              <Table.Cell>Hidden Row data</Table.Cell>
              </Table.Row>
            </Table.Body>
          )
        })
    }

您必须在点击时传递行的索引。这会将状态设置为该索引。 React将在设置状态下重新呈现组件。执行此操作时，它将检查状态中的抽屉索引值。根据该州的价值，它将显示和隐藏抽屉

Answer 2

解决方案取决于您是否希望（1）为多行显示其他详细信息，或者是否（2）一旦您单击一行，将仅显示此行的其他详细信息，并为之前单击的一行隐藏

For（1）向tableData数组添加一个showDrawyer字段，该字段将被测试以便知道是否显示该元素的附加信息。
OnClick应该获取被点击的数组元素作为参数，并应该切换此元素的showDrawyer值。

对于（2） - 决定显示哪一行的附加细节的状态变量将是索引，而不是切换。将检查此索引以显示其他详细信息。

使用单击动态反射渲染另一个表行

2 个答案: