React 如何在表格两行之间动态插入组件实现表单填写保存功能

实现思路 #

React是数据驱动的视图框架，不要直接操作DOM插入内容，所有视图变更通过状态控制即可，刚好可以解决你不能同时存在多个表单的需求：

1. 在组件state中定义activeEditRowIdx，默认值为null，用来标记当前处于编辑状态的行索引，同一时间只会有一个值，因此永远只会渲染一个编辑表单
2. 渲染表格行时，每遍历完一条普通行数据，就判断当前索引是否等于activeEditRowIdx，如果匹配就额外多渲染一行编辑行，该行内放置TransactionRuleEditor组件，单元格colspan设为10即可
3. 点击行按钮触发的addRow方法不需要操作DOM，直接把当前点击行的索引赋值给activeEditRowIdx，React会自动触发重渲染插入对应编辑行
4. 在TransactionRuleEditor的保存回调中，完成数据提交逻辑后，把activeEditRowIdx重置为null，编辑行就会自动移除

代码示例（类组件） #

class YourTable extends React.Component {
  state = {
    // 其他表格数据...
    activeEditRowIdx: null
  }

  addRow = (idx) => {
    // 赋值后自动触发重渲染，插入编辑行
    this.setState({ activeEditRowIdx: idx })
  }

  handleSaveEdit = () => {
    // 你的保存提交逻辑...
    // 保存完成后重置状态，编辑行自动删除
    this.setState({ activeEditRowIdx: null })
  }

  render() {
    return (
      <table id="allocatorTable">
        <tbody>
          {yourTableData.map((item, idx) => (
            <React.Fragment key={item.id}>
              {/* 普通数据行 */}
              <tr>
                {/* 其他单元格... */}
                <td>
                  <button onClick={() => this.addRow(idx)}>新增规则</button>
                </td>
              </tr>
              {/* 当前行需要展示编辑行的话额外渲染 */}
              {this.state.activeEditRowIdx === idx && (
                <tr className="editorRow">
                  <td colSpan={10}>
                    <TransactionRuleEditor onSave={this.handleSaveEdit} />
                  </td>
                </tr>
              )}
            </React.Fragment>
          ))}
        </tbody>
      </table>
    )
  }
}

如果需要支持同时打开多个编辑行，只需要把activeEditRowIdx改成数组，存储所有处于编辑状态的行索引即可，也不会出现多表单冲突的问题。

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