Javascript 通过React中的文本输入循环

我正在构建一个应用程序，希望用户指定一些文本字段，然后动态呈现这些字段。我在设置状态时遇到问题，因此每个字段的状态都是唯一的。以下是代码段：

        var fieldsArray = [];

        for(var i = 0; i <= this.props.numToShow; i ++){
        fieldsArray.push(
            <div>
                <label>
                    <div className="label">{i}</div> 
                    <input type='text' value={this.state.value} name={this.state.value} onChange={this.handleChange} />
                </label>
            </div>
            );
        }

    return (
      <div className = 'inputs'>
        {fieldsArray}
      </div>
    );

---

是否可以将状态初始化为数组并以这种方式跟踪输入？还是有更好的方法

将一个值数组保持在状态会很好。您只需确保传递了输入的索引，以便知道要更新什么<代码>绑定有助于：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { values: [] };
  }

  handleChange(i, e) {
    this.setState({
      values: { ...this.state.values, [i]: e.target.value }
    });
  }

  render() {
    var fieldsArray = [];

    for (var i = 0; i <= this.props.numToShow; i++) {
      fieldsArray.push(
        <div>
            <label>
                <div className="label">{i}</div> 
                <input 
                  type='text' 
                  value={this.state.values[i]} 
                  name={this.state.values[i]} 
                  onChange={this.handleChange.bind(this, i)} />
            </label>
        </div>
      );
    }

    return (
      <div className = 'inputs'>
        {fieldsArray}
      </div>
    );
  }
}

class YourComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={values:[]}；
}
手柄更换（i，e）{
这是我的国家({
值：{…this.state.values，[i]：e.target.value}
});
}
render（）{
var fieldsArray=[]；
对于（var i=0；i），程序在带有扩展运算符的行上失败。我试图进一步了解这条行在做什么。此.state.values保存所有当前状态值，[i]：e.target.values将当前输入值设置为目标值（这不应该是值[i]）我不确定我的堆栈是否不支持…但经过进一步研究，这似乎不应该成为问题。也许你没有用Babel设置spread运算符。我使用它的原因是数组值是一个新对象，只是索引发生了更改。你可以改为尝试：
var newValues=this.state.values.slice（）；newValues[i]=e.target.value；this.setState（{values:newValues}）；
请注意，渲染中的绑定可能会导致性能问题
class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { values: [] };
  }

  handleChange(i, e) {
    this.setState({
      values: { ...this.state.values, [i]: e.target.value }
    });
  }

  render() {
    var fieldsArray = [];

    for (var i = 0; i <= this.props.numToShow; i++) {
      fieldsArray.push(
        <div>
            <label>
                <div className="label">{i}</div> 
                <input 
                  type='text' 
                  value={this.state.values[i]} 
                  name={this.state.values[i]} 
                  onChange={this.handleChange.bind(this, i)} />
            </label>
        </div>
      );
    }

    return (
      <div className = 'inputs'>
        {fieldsArray}
      </div>
    );
  }
}



                               onChange={(e) => {
                                    var newPresetList = [...presetList]

                                    newPresetList.map((_item) => {
                                      if (_item.id === item.id) {
                                        _item.preset_name = e.target.value
                                        return
                                      }
                                    })
                                    setPresetList(newPresetList)
                                  }}