javascript - 在 React 中单击按钮时需要多次创建卡片组件
问题描述
因此,我想通过单击按钮多次创建卡片组件,但问题是它只创建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>
);
}
}
解决方案
您当前的代码仅替换该元素。您想改用数组,例如像这样使用它
this.setState({
change: this.state.change.concat(element)
});
推荐阅读
- python - Pygame 窗口无法从 python 脚本内部打开
- python - GET http://localhost:8000/add/ 找不到页面
- wpf - 如何将 IsEnabledChanged(未路由事件)路由到 EventHandler WPF
- python - 按最大重叠百分比和值过滤整数范围列表
- html - 将html表单动作参数传递给django视图
- email - jenkins 核心/插件漏洞/警告的非GUI通知
- java - 生成不可猜测的促销代码范围
- mysql - Mysql 存储过程 - 空间函数
- wordpress - 如何使用 WordPress 插件 polylang 进行自定义字符串翻译?
- reactjs - 根据反应中字符串数组中指定的顺序对组件进行排序