当我将表格标签添加到表中时，我的输入字段被隐藏，并且我得到如下警告：
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>我正在将所有内容添加，更新和删除到表中。当我验证该字段时，我需要一个表单标签。谁能帮助我解决这个问题？
那不是语义HTML。的唯一允许元素tbody是tr。HTML有一组严格的规则，这些规则与哪些标签可以出现在何处有关。许多浏览器不执行这些规则，但您的IDE会执行。
无论如何，使用表格来布局表单确实不是一个好主意。如果您使用表格来创建布局，则该表格将不会总是随屏幕尺寸正确调整。除了使用表格之外，还可以将div与css flexbox一起使用。https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Divs允许流内容，因此您可以将表单放入div中，而Forms也允许流内容，因此您可以将divs放入表单中。
Flexbox提供了良好的跨浏览器支持，并使创建响应式网格布局相对容易。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句