<input>不能作爲孩子出現<tr>

Question

我想在我的表格中添加一個<input>元素，更具體地說是一個複選框。以下作品：

<tbody key={rule._id}> 
    <tr> 
    <td>{rule.deviceId}</td> 
    { 
     <input 
     name="isEnabled" 
     type="checkbox" 
     checked={rule.enabled} 
     /> 
    } 
    <td>{rule.name}</td> 
    </tr> 
</tbody> 

，但它產生在控制檯中的錯誤：<input> cannot appear as a child of <tr>

是否有一個「正確」的方式做到這一點？

Answer 1

將<input>置於<td>之內。

Answer 2

tr只能包含td。可能是你可以將你的input換成td。

<tbody key={rule._id}> 
    <tr> 
    <td>{rule.deviceId}</td> 
    <td> 
     <input 
     name="isEnabled" 
     type="checkbox" 
     checked={rule.enabled} 
     /> 
    </td> 
    <td>{rule.name}</td> 
    </tr> 
</tbody> 

Answer 3

你必須把它放在一個<td>元素，你可以添加樣式到<td> DOM。

Answer 4

你錯過了一個<td>對。 {和}也不是必需的。應該是這樣的

<tbody key={rule._id}> 
    <tr> 
    <td>{rule.deviceId}</td> 
    <td> 
     <input 
     name="isEnabled" 
     type="checkbox" 
     checked={rule.enabled} /> 
    </td> 
    <td>{rule.name}</td> 
    </tr> 
</tbody>