我需要在React中单击一个按钮时创建卡片组件多次

Question

因此，我想多次单击按钮来创建卡组件，但问题是它只创建了cardComponent一次。 我该怎么办？ 有谁可以创建这些文件。

这是代码：

class GCARD extends Component {
  constructor(props) {
    super(props);
    // This state changes so the card is generated
    this.state = {
        change: '',
    }
    this.handel = this.handel.bind(this);
  }

  handel = (element) => {
    // This is the element which creates the card. 
    element = <CardComponent data="Give a little detail about the thing's you like!"
    heading= "Create Your Own Card" image="./owl.jpg"/>
    this.setState({
        change: element
    });
  }

  render() {
    return (
      <div>
        <div className="form-div">
          <div>
            <p className="form-title">Create Your Own Card</p>
            <hr/>
          </div>
          <div>
          <label className="form-label">Main Heading </label>
          <input className="form-input" type="text"/>
          <br/><br/>
          <label className="form-label">Some Info</label>
          <input className="form-input1" type="text"/>
          <br/><br/>
          {/* Just focus on the button */}
          <button onClick={this.handel} className="form-btn">CREATE</button>
        </div>
        </div>
        <div>
          {this.state.change}
        </div>
      </div>
    );
  }
}

Answer 1

您当前的代码仅替换元素。 您想使用数组代替，例如这样使用它

this.setState({
        change: this.state.change.concat(element)
    });

Answer 2

代码上的问题是每次都覆盖相同的组件。 我为您更改了代码以解决此问题：

class GCARD extends Component {
    constructor(props) {
        super(props);

        // This state changes so the card is generated

        this.state = {
            change: [],
        }
        this.handel = this.handel.bind(this);
    }

    handel = (element) => {

        // This is the element which creates the card. 
        let components = this.state.change;

        element = <CardComponent data="Give a little detail about the thing's you like!"
            heading="Create Your Own Card" image="./owl.jpg" />

        components.push(element);

        this.setState({
            change: components
        });
    }

    render() {
        return (
            <div>
                <div className="form-div">
                    <div>
                        <p className="form-title">Create Your Own Card</p>
                        <hr />
                    </div>
                    <div>
                        <label className="form-label">Main Heading </label>
                        <input className="form-input" type="text" />
                        <br /><br />
                        <label className="form-label">Some Info</label>
                        <input className="form-input1" type="text" />
                        <br /><br />

                        {/* Just focus on the button */}

                        <button onClick={this.handel} className="form-btn">CREATE</button>
                    </div>
                </div>
                <div>
                    {this.state.change.map(comp => (comp))}
                </div>
            </div>
        );
    }
}

Answer 3

您可以采用多种不同的方法来解决此问题。 我建议将onClick处理程序绑定到您的创建按钮，该按钮会将一个对象推入一个数组中，然后您可以使用该数组来设置状态。 然后在渲染中，映射状态以返回每张卡。 请记住，您可能需要为边距，内联弯曲等使用适当的CSS。

例如：

clickHander(){
    let arr = [];
    arr.push({
    <card/>
    })

    this.setState({change: arr})
}


render(){
    const card = this.state.change.map((card) => { return ( card )})
    return (
      <div>
       {card}
      </div>
    )
}

希望这可以帮助！