javascript - 使用 onClick 事件调用 React 组件
问题描述
我需要调用一个组件(ExampleComp),当单击按钮时,再次调用该组件(ExampleComp)。这个想法是在您按下按钮时多次调用 Component(ExampleComp)。
function newComponent{
<ExampleComp/>
}
------
return(
<div>
<ExampleComp/>
<Button className="btnNew" onClick=
{newComponent}> Create a new Component</Button>
</div>
)
其实我不知道该怎么做,我会感谢你的帮助。
解决方案
您可以将状态用于此目的。假设您的状态是这样的:
this.state = { items: [] };
您可以渲染所有项目,如下例所示:
return (
<div>
{this.state.items.map(item => {
return <ExampleComp exampleProp={item.exampleProp} />;
})}
<Button className="btnNew" onClick={newComponent}>
Create a new Component
</Button>
</div>
);
最后,你可以将一个项目推入状态,React 会处理剩下的事情。
function newComponent{
newItem = { exampleProp: 'Something?' };
this.setState((state, props) => ({ items: [...items, newItem] }));
}
这将完成这项工作。我只是使用“exampleProp”作为示例,但您不必使用它。实际上,状态也可以只是一个数字。重要的部分是在每个用户界面变化中使用状态。
推荐阅读
- gcc - GCC __attribute__((section(".target_addr") 不起作用
- java - WASI 和 JVM - 操作系统抽象
- android - 在清单中添加 android:requestLegacyExternalStorage="true" 后,android 资源链接失败
- javascript - 将数组对象的数组与javascript中的另一个数组进行比较
- git - 通过共享互联网从远程服务器连接到 Github
- r - R socketConnection - 读取和超时
- here-api - HERE Geocode API (v6.2) 的防火墙请求
- nginx - nginx 仅适用于文件名“index.html”
- python - 在新选项卡中从网络驱动器 django 打开文件
- sql - 错误:调用过程的参数数量错误