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

Question

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

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

https://codesandbox.io/s/rj8o4r493n

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>
          )
        })
    }

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