javascript - 你如何在 React 中临时隐藏一个表?
问题描述
当模态出现时,我需要显示不同的背景,因此我需要隐藏表格,直到用户在模态中提交表单。有任何想法吗?我找不到表的任何属性show
或hide
属性。
桌子
import React, { Component } from 'react';
import Table from "react-bootstrap/Table";
import SampleQ from '../components/question.js';
import css from '../scss/style.scss';
import Layout from '../components/layout';
export default class extends Component {
constructor(props) {
super(props);
this.state = {
showBackground: false
};
this.showBackground = () => {
this.setState({ showBackground: true });
};
this.hideBackground = () => {
this.setState({ showBackground: false });
}
}
static getInitialProps({query: {categories, questions, answers}}) {
return {postCs: categories, allQs: questions, allAs: answers}
}
createTable = () => {
let table = [];
let cats = [];
for (let i = 0; i < this.props.postCs.length; i++){
cats.push(<th key = {i}>{this.props.postCs[i].title}</th>);
}
table.push(<thead> <tr> {cats} </tr> </thead>);
let index = 0;
// Outer loop to create parent
for (let i = 1; i < 6; i++) {
let children = [];
//Inner loop to create children
for (let j = 1; j < 7; j++) {
children.push(
<td>
<div>
<SampleQ
amount={i}
question={this.props.allQs[(index)].title}
answer={this.props.allAs[(index)].title}
showBackdrop={this.showBackground}
hideBackdrop={this.hideBackground}
/>
</div>
</td>);
index++;
}
//Create the parent and add the children
table.push(<tr>{children}</tr>)
}
return table
};
render() {
return (
<div>
<Layout showBackground={this.state.showBackground} title="lllll" />
<Table striped bordered hover variant = "dark" className={css.table} hide={true}>
{this.createTable()}
</Table>
</div>
)
}
}
解决方案
您可能想使用条件渲染,例如
render () {
return (
<Modal>
{isFormSubmitted ? <Table /> : null}
</Modal>
)
}
推荐阅读
- c# - C# Http 请求与 json 中的数组
- javascript - 在加载的 iframe 处设置本地存储
- r - 每隔一个垂直月着色一次,白色和灰色交替
- python - 从另一个 def 内部调用 def
- python-3.x - 当我在 vs 代码中运行 .py 文件时出现此错误,它说某些内容无法识别,有人可以帮我解决这个问题吗?
- node.js - 手动安装 nodejs 依赖项
- python - 不使用 tkinter 的 Python 中的可点击图像
- haskell - :=> 在 Haskell 的数据构造器中意味着什么
- qt-creator - 缺少 Qt 皮肤示例
- c++ - 致命错误:找不到“google/protobuf/port_def.inc”文件