我需要在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>
    )
}

希望這可以幫助！