使用 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`]