如何連續添加圖片到ReactJS的表中按鈕點擊

我想添加圖片到表中，用戶單擊一個按鈕，圖像轉到第一個單元格，他們再次按下它，第二個圖像進入第二個單元格等等。我試圖做這樣的事情：如何連續添加圖片到ReactJS的表中按鈕點擊

<tr className = "tableRow"> 
       <td><img src = {this.state.Array[0].image} alt = "" /></td> 
       <td><img src = {this.state.Array[1].image} alt = ""/></td> 
       <td><img src = {this.state.Array[2].image} alt = ""/></td> 
       </tr>

，然後在點擊按鈕只需按下一個新的圖像狀態數組。當然，我沒有意識到，直到圖像被推送到數組，Array [x]將是未定義的，並且渲染將失敗。

我想我可以將空字符串放在數組中，然後用圖像替換它們，但我覺得有一種更好的方式可以去做這個，我錯過了。

任何建議都理解

來源

2017-08-04 WebbH

什麼是您的表看起來像大隻顯示img元素？你有固定數量的柱和行，或者它們基於什麼？ –

@JasonGoemaat這是一個3x3表 – WebbH

您可以使用條件來如果數組長度足夠

<td> 
    { this.state.Array.length > 0 ? <img src={this.state.Array[0]} alt="" /> 
    : null } 
</td>

來源

2017-08-04 22:39:17

更好地寫成'{this.state.Array.length> 0 && }' – Matthew

@Matthew這個工作很好，但是你能澄清一下這裏發生了什麼嗎？ – WebbH

@WebbH [Check this out] （https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-with-logical--operator） – Matthew

爲什麼不遍歷所有當前存儲的狀態的圖像，使得僅是在陣列中的圖像將被呈現，並且當它們被添加或刪除，圖像的數量將被更新。

不要忘記爲每個元素包含一個唯一的鍵。你可能有更好的方法來做到這一點，但現在我基於數組索引（不理想）創建了鍵。

return (
    <tr className="tableRow"> 
     {this.state.Array.map((image, index) => (
      <td key={`td-${index}`}> 
       <img key={`img=${index}`} src={image.image} alt="" /> 
      </td> 
     ))} 
    </tr> 
)

來源

2017-08-04 22:29:43 Matthew

只是爲了增加這一點。如果你擔心你的'this.state.Array'在組件最初掛載時可能是空的，那麼你可以使用'{this.state.Array && this.Array.map（（image，index）=> .. .....' – Rowland

如何連續添加圖片到ReactJS的表中按鈕點擊

回答

相關問題