当我将表单标签添加到表中时,我的输入字段被隐藏并且我收到这样的警告:
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/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Divs 允许流动内容,因此您可以将表单放入 div 中,而表单也允许流动内容,因此您可以将 div 放入表单中。
Flexbox 提供了良好的跨浏览器支持,并使创建响应式网格布局变得相对容易。
关于javascript - 无法将表单标签添加到表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55241717/