javascript - 在按钮上单击显示反应表
问题描述
我有一个带有子组件的反应表,在子组件中,我有 2 个按钮单击每个按钮需要显示反应表,请帮助我。
ex:
class Sample extends React{
firstFun=()=>{
return <ReactTable data={} columns={columns}
}
secondFun=()=>{
return <Reacttable data={} columns={columns}
}
subcompo=()=>{
// some code
<bt1 onclick={this.firstFun}/>
<bt2 onclick={this.secondFun}/>
}
render(){
return(
<ReactTable
data={}
submcomponent={this.subcompo}
/>
)}
}
解决方案
您可以在状态下使用布尔值设置单击和激活哪个按钮并显示不同的表格。是这样的类似于你正在寻找的东西:
class Sample extends React {
state = {
firstButtonActive: false,
secondButtonActive: false
}
handleFirstButtonClick = () => {
this.setState({ firstButtonActive: !this.state.firstButtonActive})
}
handleSecondButtonClick = () => {
this.setState({ secondButtonActive: !this.state.secondButtonActive })
}
subcompo = () => {
// some code
<bt1 onclick={this.handleFirstButtonClick} />
<bt2 onclick={this.handleSecondButtonClick} />
}
render() {
const { firstButtonActive, secondButtonActive } = this.state;
return (
<>
<ReactTable
data={}
submcomponent={this.subcompo}
/>
{firstButtonActive && <ReactTable data={} columns={columns}/>}
{secondButtonActive && <ReactTable data={} columns={columns} />}
</>
)
}
}
推荐阅读
- r - 将参数有条件地传递给 R 函数
- java - 在 docker 中运行的 Spring Boot SOAP 服务找不到 ExtensibilityElement 类
- reactjs - 从 S3/Cloudfront 上的 React SPA 移出,但用户的浏览器仍然显示旧的缓存 SPA
- laravel - 带有变量的 WhereRaw Laravel
- webpack - 遇到我不明白的 babel 构建错误
- r - 打印数据框行时,R Markdown 消除了“##”
- python - Chromedriver找到一个xpath就可以了,但在无头时却不行
- vba - 如何在段落中搜索多个字符串(列表中的任何一个字符串)(使用输入和输出图像更新)
- regex - 负前瞻行为
- wpf - WPF 用阻塞我的 UI 线程的大表填充 DataGrid