如何在不总是呈现表单字段时提交表单字段？

Question

我有一个表组件，它只动态呈现当前可见的行（出于性能原因）。例如，如果表中有1000行，并且用户向下滚动，我只为行490-510渲染<tr>个元素。 Here's a visualization如果我的描述不清楚。

问题，因为表格行可以包含输入字段 - 如何确保使用<form>提交所有字段？

用例：

1. 用户填写表格第一行中的字段<input name=firstName_row1>
2. 用户向下滚动，只有20-40行在DOM
中
3. 用户在DOM中提交没有<input name=firstName_row1>的页面
4. 表单提交不包含firstName_row1
的值

一些想法：

1. 为每个表输入维护一个姐妹元素<input type=hidden>，并将值写入两个输入
   • 这保证了表单提交将包含所有数据，但是创建/更新其他DOM元素会带来很多额外开销。
2. 跟踪所有输入＆＃39;内存中的值，直到form.onsubmit触发，然后为所有＆＃34;丢失＆＃34;生成<input>个元素。字段，以便它们包含在提交中
   • 还有一些DOM开销，但我只需要为n字段创建n个新元素（而不是2n，就像第一个选项一样） 。另外，我不确定我是否可以在每个场景中可靠地劫持form.onsubmit - 其他一些事件处理程序可以调用event.preventDefault()并在此函数运行之前手动提交表单。

还有其他想法吗？

我的环境：服务器正在使用Java（一些不同的框架），我用ReactJS渲染表。表格的数据，包括表格字段＆＃39;名称和值，由服务器在页面加载时在JSON对象中定义。服务器期望传统的POST具有key1=value1等，而不是JSON对象或其他数据表示。