React.js中点击表格编辑按钮如何避免所有行弹窗同时弹出

问题原因 #

你当前在Redux中存储的是全局单一布尔值openeditpopup，所有表格行都共用这一个状态判断是否渲染弹窗，因此只要状态变为true，所有行的弹窗都会同时触发显示。

修复步骤 #

1. 修改Redux状态结构
   将原来的布尔状态替换为存储当前激活编辑的行ID，无弹窗打开时状态值为null：

// 原状态结构
{
  openeditpopup: true/false
}
// 修改后
{
  activeEditRowId: 行ID值/null
}

2. 调整弹窗开闭的Action逻辑

• 触发打开弹窗的Action时，将当前点击行的唯一ID作为参数传入，赋值给activeEditRowId
• 触发关闭弹窗的Action时，直接将activeEditRowId重置为null

3. 修改表格行的弹窗判断逻辑
   将原来的全局布尔判断，改为匹配当前行ID与Redux中存储的激活ID，只有匹配成功才渲染当前行的弹窗：

<Grid.Row>
  <Grid.Column width={1} />
  <Grid.Column width={14}>
    {/* 假设当前行的唯一ID为row.id，替换为你实际的行ID字段 */}
    { this.props.activeEditRowId === row.id ? <EditPopUp position='bottom-right'/> : null }
  </Grid.Column>
  <Grid.Column width={1} />
</Grid.Row>

优化建议 #

你也可以选择不在每行都渲染弹窗组件，直接在表格外层全局渲染一个EditPopUp，打开弹窗时将当前选中的行数据传入弹窗即可，能减少不必要的组件渲染，提升表格性能。

内容的提问来源于stack exchange，提问作者rudeTool