Question

每次单击时，我都会串联组件并将其渲染到屏幕上。那很好。但是，如果我想从这些组件中获取数据（值）并将它们放在同一数组CompList（或另一个数组）中怎么办？需要明确的是，我将使不同输入框中的所有值对应于数组ex中它们自己的元素：如果在数组索引1内elementName =“”，则“”是索引处的值。我将如何去做呢？

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;

Answer 1

对.concat() works in JS的方式进行了一些研究，这意味着您需要发送一个数组（array1.concat(array2)）并将其组合在一起。 You may be looking for .push()，其中包含一个元素。

此外，this.setState({ array: array.push(element) })或this.setState({ array: array.concat(array2) })将不起作用，因为.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
  );
}

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

1 个答案: