使用 JS object 中屬性的值作為表單輸入的值

Question

我正在嘗試在高爾夫應用程序中為 18 個不同的洞輸入 18 個分數，目前輸入字段名稱是動態更新的，當您單擊next或上一個按鈕時， prev增加 1 或減少 1。

在頁面加載時，我用數據庫中保存的玩家當前分數填充 scoreCardObj（如果存在，否則輸入為空）我希望該值與scoreCardObj中字段的值相匹配，所以當我輸入分數時對於洞 4，輸入名稱將是h4Score ，我希望該值是scoreCardObj.h4Score的值，但我需要4是holeIndex+1的值，所以類似於scoreCardObj.h${holeIndex+1}Score SO到目前為止，如果holeIndex為 0，我只能讓它返回字符串"scoreCardObj.h1Score" ，然后當我移動到下一個洞時它會更改為"scoreCardObj.h2Score" 。

下面是我想要的第一個洞的輸入值，然后當我移動到下一個洞時它會動態更改為 h2Score。

 <div id='score-entry'>
  <h2 >Hole {holeIndex+1}</h2>
  <input name={`h${holeIndex+1}Score`} value={scoreCardObj.h1Score} onChange={onChangeScoreCard} type="number" min={"1"} max={"15"}></input>
  <p style={{color:"red"}}>Please enter gross scores</p>
 </div>

Answer 1

我相信您可以使用括號表示法動態訪問道具h1Score 、 h2Score 、 h3Score ：

scoreCardObj[`h${holeIndex+1}Score`]