无法将表单标记添加到表中

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提供了良好的跨浏览器支持，并使得创建响应式网格布局变得相对容易。