Question

我想隐藏数据表，直到我的文件上传。截至目前，我得到一个空白表，但我想隐藏该表，直到上传文件为止。

var selectedList = {};
const columns = [
 {
  name: "id",
  label: "Select",
  options: {
    filter: true,
   display: Hidden
}
},
{
 name: "question",
 label: "Questions",
 options: {
   filter: true,
  sort: false
}
},
{
name: "answer",
label: "Answers",
options: {
  filter: true,
  sort: false
}
}
];
const options = {
filterType: "checkbox",
selectableRows: false,
selectableRowsOnClick: true,
customToolbarSelect: () => {},
onRowsSelect: (rowData, rowState) => {
selectedList = rowState;
}
};

在我的渲染语句中，我将返回以下内容：

     <div>
        <div className="peers fxw-nw pos-r">
          <div className="" id="main-window-scroll">
            <MuiThemeProvider theme={this.getMuiTheme()}>
              <MUIDataTable
                title={"FAQs Data List"}
                data={this.state.faqList}
                columns={columns}
                options={options}
                // onRowClick={this.handleRowSelection}
              />
            </MuiThemeProvider>
            {/* {this.loadDataTable()} */}
          </div>
        </div>
      </div>

默认情况下如何隐藏表格，并且仅在上传文件时显示。

Answer 1

使用条件渲染：

     <div>
        <div className="peers fxw-nw pos-r">
          <div className="" id="main-window-scroll">
            <MuiThemeProvider theme={this.getMuiTheme()}>
              {tableEmpty ? <LoadingIndicator> : <MUIDataTable //use some kind of
                title={"FAQs Data List"}                       //loading indicator
                data={this.state.faqList}
                columns={columns}
                options={options}
                // onRowClick={this.handleRowSelection}
              />}
            </MuiThemeProvider>
            {/* {this.loadDataTable()} */}
          </div>
        </div>
      </div>

Answer 2

您可以将布尔值保持在isUploading之类的状态。

开始上传时，将isLoading设置为true，当完成上传时，将isUploading设置为false。

在jsx中，您可以检查此值来决定显示或隐藏表。例如：

我做了一个密码箱，您可以检查： https://codesandbox.io/s/muidatatables-custom-component-example-n33ic

{!this.state.isUploading && <MUIDataTable
                title={"FAQs Data List"}
                data={this.state.faqList}
                columns={columns}
                options={options}
                // onRowClick={this.handleRowSelection}
              />
   }

隐藏MUI数据表，直到上传文件

2 个答案: