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

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

1 个答案: