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

Question

我有一个输入字段

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

我试图结合价值属性的地方

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

我尝试了所有这些，但没有奏效。 如何将 state 和数组 map 中的索引结合起来？

预期结果：this.state.odds0，其中索引为 0，它调用 state 元素

我得到的例子：

this.state.odds 设置为 1.5

this.state.odds0 设置为 5

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

Answer 1

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

让我给你举个例子：

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

<input id="changeThisToYourUniqueID">

2. 然后我们创建另一个元素，脚本元素，这是我们操作代码的地方。

<script></script>

3. 我们在脚本元素中编写 javascript 代码，将 object 的值设置为常量和索引的总和。

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

变化会发生得非常快，所以如果你真的需要看到变化发生，你可以使用递归 function 使用原生 JavaScript setTimeout() ZC1C425268E68385D1AB4Z5074 添加延迟

<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获得您想要的值

要从 state 获取所需的值，请尝试

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