在状态中存储动态生成的输入值

Question

场景：
您在页面上有一个输入字段，无论 number 用户输入什么，我都想生成更多输入。生成的每个输入代表用户可以选择的值。默认情况下，我们从 0 -> N 生成值。

示例： 如果用户将输入设置为 5，我们将生成 5 个输入，每个输入的值从 0 -> 4

问题：
我们默认生成的值可能会改变。例如，用户可能想要将其中一个输入更改为他的值。

示例： 用户设置 5，我们生成 5 个输入，从 0 -> 4，然后他决定我们要将其中一个值更改为 42。在这种情况下，我们将有，例如：

输入1：0
输入2：1
输入3：3
输入4：42

问题
我希望/需要使这些值处于状态，否则我无法在它们输入输入时更新该值。

我面临的问题是：我怎么知道他在输入哪一个？输入是动态生成的。

如果我将输入设置为具有 inputChangeHandler() 在该函数内部检查什么以知道要更改哪个状态值？ 此外，由于需要保留其他值，因此我只需要更改该键，而不需要更改其他值。如您所见，我面临很多问题。 :) 任何建议将不胜感激。

演示
编辑：https://stackblitz.com/edit/react-gaq7eh
直播：https://react-gaq7eh.stackblitz.io（输入在左上角）

P.S - 不确定编辑器的更改是否反映在所有地方，以防万一，这里是代码：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class InputProblem extends React.Component {
  constructor() {
    super();
    this.state = {
      inputs: [],
      inputValue: null
    };
  }

  generateInputs = (value) => {
    this.setState({inputs: Array.from(Array(Number(value)).keys()), inputValue: Number(value)})
  }

  render() {
    return (
      <div>
      <input className="main-input" type="text" value={this.state.inputValue} onChange={(e) => this.generateInputs(e.target.value)} />
      {
        this.state.inputs.map(item => (
          <input type="text" value={item}/>
        ))
      }
      </div>

    )
  }
}
render(<InputProblem />, document.getElementById('root'));

Answer 1

无需更改太多代码的一个选项是通过跟踪每个相应 input 的 onChange 处理程序中的索引来确定它是哪个输入

handleInputTextUpdate = (idx) = (e) => {
  const nextInputState = [...this.state.inputs]
  nextInputState[idx] = e.target.value
  this.setState({inputs: nextInputState})
}
this.state.inputs.map((item, index) => (
  <input onChange={this.handleInputTextUpdate(index)} />
)

Answer 2

你可以为每个input添加一个唯一的id，然后你可以使用这个id来确定哪个input正在改变。

 this.state.inputs.map((item, index) => (
        <input type="text" key={index} id={index} value={item} 
        onChange={(e) => {  console.log("e.target.id: "+ e.target.id + " value: " + e.target.value)}} />
        ))

使用e.target.id访问元素的id。