React表格编辑表单位置问题：如何让表单显示在选中行下方？

你的问题核心是表单被固定渲染在表格外部，导致无论点击哪一行，表单都只会出现在表格底部。要让表单跟随目标行显示，需要把表单嵌入表格内部的对应行后面。

修改步骤： #

1. 添加状态记录当前编辑行ID
   在组件的state中新增editRowId字段，用来标记正在编辑的行：

state = {
  // 保留原有状态字段
  editRowId: null,
  new_row: { /* 保留原有结构 */ }
}

2. 更新编辑方法，绑定目标行数据
   修改_edit方法，点击编辑按钮时记录当前行ID，并把对应行的数据传入编辑表单：

_edit = (id) => {
  // 找到当前点击行的数据
  const targetAction = this.state.actions.find(action => action['_id'] === id);
  this.setState({
    editRowId: id,
    new_row: { ...targetAction, type: { value: "Edit" } }
  });
}

3. 将表单渲染在目标行的下方
   在表格行的循环逻辑里，在当前行的<tr>之后，判断如果是正在编辑的行，就渲染一个跨列的行来承载表单：

{ this.state.actions.map((action,index) => {
    return (
        <React.Fragment key={index}>
            <tr>
                <th scope="row">{index}</th>
                <td>{action.actionType.label}</td>
                <td>{action.description}</td>
                <td>{action.creation}</td>
                {/* 改用箭头函数避免重复绑定 */}
                <td><button onClick={() => this._edit(action['_id'])} class="btn btn-primary" type="submit">edit</button></td>
                <td><button onClick={() => this._delete(action.action_id)} class="btn btn-danger" type="submit">delete</button></td>
                <td> -</td>
            </tr>
            {/* 仅在当前行处于编辑状态时渲染表单 */}
            {this.state.editRowId === action['_id'] && (
                <tr>
                    {/* 跨7列，与表头列数保持一致，避免布局错乱 */}
                    <td colSpan="7">
                        {this.form(this.state.new_row)}
                    </td>
                </tr>
            )}
        </React.Fragment>
    )
})}

4. 删除表格外部的冗余表单代码
   移除原来表格下方的这段固定渲染代码：

{this.state.new_row.type.value === „Edit“ ? (
<div>
    {this.form(this.state.new_row)}
</div>) : (
)}

核心逻辑说明： #

• 通过editRowId精准控制表单的显示位置，只有匹配的行才会在下方渲染表单
• 用colSpan="7"让表单行占满表格宽度，保证布局一致性
• 点击其他行的编辑按钮时，editRowId会自动更新，表单会切换到新的目标行下方

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