Javascript 如何使用输入组件数组中的输入值创建数组？

每次单击时，我都会连接组件并将其渲染到屏幕上。这很有效。但是，如果我想从这些组件中获取数据值并将它们放在同一个数组、CompList或其他数组中，该怎么办？为了清楚起见，我希望不同输入框中的所有值都对应于数组中自己的元素，例如：如果elementName=数组的索引1内，则是索引处的值。我该怎么做呢

import React, { Component } from 'react';
import './App.css';
import Comp from './Comp';
import Button from './button';

class App extends Component {

  state = {
    CompList: [],
    elementName: ""
  }

  AddComp = event => {

    this.setState(
      {CompList: this.state.CompList.concat(this.state.elementName)}
    );
  }

  render() {

    return (
      <div>
        {this.state.CompList.map(el => <Comp/>)}
        <Button AddComp = {this.AddComp}/>
      </div>
    );
  }
}

export default App;

下面是添加组件的单击按钮。AddComp被发送到此组件

import React from 'react';

const button = props =>{
    return(
        <div>
            <div onClick = {props.AddComp}>
                Clickme
            </div>
        </div>
    );
}

export default button;

这是组件本身，被迭代和显示的组件。我希望我说得够清楚。如果需要，我很乐意发布更多信息

import React from 'react';

const Comp = props =>{
    return(
        <div>
            <input/>
            <div>
                100
            </div>
        </div>
    );
}

export default Comp;

通过对.concat的一些研究，这意味着您需要发送一个数组array1.concatarray2，它将组合它们，这需要一个元素

此外，此.setState{array:array.pushelement}或此.setState{array:array.concatarray2}将不起作用，因为.push和.concat都返回数组的新长度，所以最终将数组设置为数字

因此，要执行您正在寻找的任务，您需要使onClick函数如下所示：

AddComp = event => {
  var tempCompList = this.state.CompList; //this creates a duplicate array
  tempCompList.push(this.state.elementName); //this needs to be separate or we will set a variable to an integer on accident

  this.setState(
    {CompList: tempCompList} //where we set the original array to the duplicate array
  );
}

---

我很想帮忙，但老实说，我不知道你想做什么：P你能不能把你的问题重新表述一下，或者再解释一下：当然。因此，我有一个组件的动态列表该组件包含一个输入标记。每次单击按钮，它都会添加一个输入组件。在我添加了足够多的组件no limit之后，我想输入字段，然后将所有数据（包括空字符串）保存到它自己的数组中，以供以后使用。我希望这已经足够清楚了。新数组中的数据应该与字段中键入的数据完全相同。