数组未通过 reactjs 中的 onChange 处理程序更新

Question

我正在尝试将在单击 GUI 上的“添加”按钮时添加的单独输入元素中输入的每个值添加到数组中。

没有初始数组，所以请不要从初始数组的任何映射中放入索引。

当用户单击 GUI 上的添加按钮时会添加多个输入元素，下面的方法 subDivs() 解释了这一点。

所以我在 onChange 处理程序中将计数器值作为索引传递，但此代码不起作用。真的在寻找一些富有成效的投入，也许我错过了一些重要的部分。

  handleChange(event, index) {
    event.preventDefault();
    let { nameArray } = this.state;
    nameArray[index] = event.target.value;
    this.setState({nameArray}, () => console.log("Array ", nameArray))
  }

addRow() {
    this.setState({ count: this.state.count + 1 })
  };

  subDivs() {
    let count = this.state.count, uiItems = [];
    var { names } = this.state;
    let options2 = names.map(name2 => {
      return { value: name2.name, label: name2.name };
    })
    while (count--)
      uiItems.push(
        <div className="newName" key={this.nextUniqueId()}>
          <div className="input-group mb-3" >
            <input id={count+1} type="text" className="form-control" placeholder="Enter Name"
              onChange={(e) => this.handleChange(e, count+1)}
            />
          </div>
        </div>
      )
    return uiItems;
  }

Answer 1

可能会有所帮助。

handleChange(event) {
    event.preventDefault();
    let { nameArray } = this.state;
    if (!Array.isArray(nameArray)) nameArray = [];
    nameArray.push(event.target.value);
    this.setState({nameArray}, () => {
      return {
        nameArray
      };
    });
  }