使用 JS 对象中属性的值作为表单输入的值

Question

我正在尝试在高尔夫应用程序中输入 18 个不同洞的 18 个分数，目前输入字段名称是动态更新的，当您单击 next 或 prev 按钮时，holeIndex 会递增减 1 或减 1。

在页面加载时，我用数据库中保存的玩家当前分数填充 scoreCardObj（如果存在，否则输入为空）我希望该值与 [=14 中字段的值相匹配=] 所以当我输入第 4 洞的分数时，输入名称将是 h4Score，我希望值是 scoreCardObj.h4Score 的值，但我需要 4 作为值的 holeIndex+1 所以像 scoreCardObj.h${holeIndex+1}Score 到目前为止我只能得到它 return 字符串 "scoreCardObj.h1Score" 如果 holeIndex 是 0 然后它变成 "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

我相信您可以使用 bracket notation:

动态访问道具 h1Score、h2Score、h3Score

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

使用 JS 对象中属性的值作为表单输入的值

Using the value from a property in a JS object as the value for form input

javascript

template-literals

使用 JS 对象中 属性 的值作为表单输入的值

Using the value from a property in a JS object as the value for form input

javascript

template-literals

使用 JS 对象中属性的值作为表单输入的值