将两个变量合并为一个输入属性JS

Question

我有一个输入字段

<input required id={'odds' + index} type="text" step="any" className="form-control validate" value={this.state.odds + ' ' + index} onChange={this.onChange} />

我正在尝试组合 value 属性的地方

value={this.state.odds + ' ' + index}
value={this.state.odds + index}
value={this.state.odds`${index}`}
value={this.state.odds `${index}`}

我尝试了所有这些，但没有奏效。如何在数组映射中组合状态和索引？

预期结果：this.state.odds0，其中 index 为 0，它调用状态元素

我得到的示例：

this.state.odds 设置为 1.5

this.state.odds0 设置为 5

如果索引为 0，我会在命令结束时得到“1.5 0”或“1.50”。我想得到'5'。

Answer 1

您使用了错误的方法，您不能将 JavaScript 代码直接放在 HTML 上的 value 属性上，而应该从脚本标记中更改它。

让我举个例子：

1. 我们首先在 HTML 上创建输入元素，注意 id 属性，它在 HTML 文档的所有元素中应该是唯一的，否则将无法正常工作。

<input id="changeThisToYourUniqueID">

1. 然后我们创建另一个元素，即脚本元素，我们将在这里操作我们的代码。

<script></script>

1. 我们在脚本元素中编写javascript代码，将对象的值设置为常量和索引之和。

<script>
    let timesWeWantToLoop = 3
    for(let index = 0; index < timesWeWantToLoop; index++){
        document.getElementById("changeThisToYourUniqueID").value = "holamigos!"+index;
    }
</script>

变化会很快发生，所以如果你真的需要看到变化的发生，你可以使用递归函数，通过原生 JavaScript setTimeout() 函数为其添加延迟。

<input id="changeThisToYourUniqueID">
<script>
  let index = 0;
  let timesWeWantToLoop = 3
  function myLoop() {
    document.getElementById("changeThisToYourUniqueID").value = "holamigos!"+index;
    setTimeout(function() {
      index++;
      if (index < timesWeWantToLoop) {
        myLoop();
      }
    }, 1000)
  }
  myLoop()
</script>

注意：该示例不适用于可变输入情况，在这些情况下，您需要创建一个事件侦听器以查看输入值何时发生变化。

干杯！

Answer 2

您没有得到想要的结果，因为this.state.odds 返回一个数字，而您试图通过字符串连接将它与另一个数字连接起来，但这只会给您一个字符串。它不会从state得到你想要的值

要从状态中获取所需的值，请尝试

value={this.state['odds' + index]}