在 table React 中获取行输入的值

Question

我有一个包含动态 table (nx2) 的表单，每行都有输入。当我提交表单时，我需要将所有这些输入的值保存在一个数组中。它应该看起来像： [['M',10],['S',10],.......]。我没有找到实现此目的的方法，我已经看到我必须区分每个输入，但我不知道以后如何访问该值。

这是我的 table 代码：

<table class="table-size-qty">
    <thead>
       <tr>
          <th scope="col">Size</th>
          <th scope="col">Qty</th>
       </tr>
       {rows.map((r) => (
          <tr>
             <td><input className="no-style" name={'size'+r} type="text"></input></td>
             <td><input className="no-style" name={'qty'+r} type="number"></input></td>
          </tr>
        ))}
    </thead>
</table>
<button type='button' class="buttonAddRow" onClick={addRow}>Add row</button>

每次点击它都会通过 addRow() 方法添加一行：

 const addRow = () => {
      setRows([...rows, rows.length]);
 }

非常感谢您！

Answer 1

我相信当您添加新行时，您应该知道新的大小数量值：

// newSize, newQty are available
 const addRow = () => {
      setRows([...rows, [newSize, newQty]]);
 }

因此 rows 状态现在将具有您预期的结构，您可以像这样渲染它：

{rows.map(([size, qty]) => (
  <tr>
      <td><input className="no-style" name={`size${size}`} value={size} type="text"></input></td>
      <td><input className="no-style" name={`qty${qty}`} value={qty} type="number"></input></td>
  </tr>
))}

已更新，试试下面的演示： https://stackblitz.com/edit/react-ebcpff

在 table React 中获取行输入的值

get values of row-inputs in table React

html-table

reactjs