无法将表单标签添加到表格中

Question

当我将表单标签添加到表格中时，我的输入字段被隐藏并且我收到如下警告：

index.js:1446 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.

index.js:1446 Warning: validateDOMNesting(...): <form> cannot appear as a child of <tbody>.

这是我的代码：

<Table hover bordered striped responsive size="sm">
  <thead>
    <tr>
      <th>Id</th>
      <th>color</th>
      <th>Size</th>
      <th>manufactureDate</th>
      <th>quantity</th>
      <th>Expiry Date</th>
      <th>Product</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <form>
      <div>
        <tr>
          <td>
            <input type="text" name="id" value={this.state.id} disabled />
          </td>

          <td>
            <input type="text" name="color" ref="color" defaultValue={this.state.color} onChange={this.handleChange} />
          </td>
          <td>
            <input type="text" name="size" ref="size" defaultValue={this.state.size} onChange={this.handleChange} />
          </td>
          <td>
            <input type="date" name="manufacturedate" ref="manufacturedate" defaultValue={this.state.manufactureDate} onChange={this.handleChange} />
          </td>
          <td>
            <input type="text" name="quantity" ref="quantity" defaultValue={this.state.quantity} onChange={this.handleChange} />
          </td>
          <td>
            <input type="date" name="expirydate" ref="expirydate" defaultValue={this.state.expiryDate} onChange={this.handleChange} />
          </td>
          <td>
            <select ref="option" onChange={this.handleChange}>
              <option value={this.state.productId}>
                {this.state.productName}
              </option>
              {this.state.products.map(option => (
              <option key={option.id} value={option.id} // onChange={this.setState.product.id}>
                {option.name}
              </option>
              ))}
            </select>
          </td>
          <td>{this.getBtn()}</td>
        </tr>
      </div>
    </form>
  </tbody>
</Table>

我正在向表中添加、更新和删除所有内容。当我验证该字段时，我需要一个表单标签。谁能帮我解决这个问题？

Answer 1

这不是语义 HTML。 tbody 唯一允许的元素是 tr。 HTML 有一套严格的规则，与哪些标签可以出现在哪里有关。很多浏览器不会强制执行这些规则，但您的 IDE 会。

无论如何，使用表格来布局表单确实不是一个好主意。如果您使用表格来创建布局，则它不会始终根据您的屏幕正确调整大小。您可以将 div 与 css flexbox 一起使用，而不是使用表格。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Div 允许流式内容，因此您可以将表单放入 div 中，表单也允许流式内容，因此您可以将 div 放入表单中。

Flexbox 提供了良好的跨浏览器支持，并使得创建响应式网格布局相对容易。