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>
    )
}

希望这会有所帮助！

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

3 个答案: