嗨,我是新来的人,我正在实施react-table
。我知道,如果任何道具更改,则react会自动渲染组件。现在,对于我的工作表,我试图根据复选框隐藏和显示列上的过滤器。 react-table
已经提供了filterable
选项来执行此操作。但是我不想对我的actions
列显示过滤器。
这里
class JobsTable extends React.Component {
constructor() {
super();
this.state = {
data: [],isFilterable: true,};
}
componentDidmount() {
this.getJobs();
}
getFormattedDate(dateString) {
const current_datetime = new Date(dateString);
const formatted_date =
('0' + current_datetime.getDate()).slice(-2) +
'/' +
('0' + (current_datetime.getMonth() + 1)).slice(-2) +
'/' +
current_datetime.getFullYear();
return formatted_date;
}
getJobs = async pageIndex => {
pageIndex = pageIndex || 1;
this.setState({ isLoading: true });
const { recordsToFetch } = this.state;
const resp = await getallJobs(pageIndex,recordsToFetch);
if (resp.success) {
this.setState({
data: resp.data.jobs,pages: Math.ceil(resp.data.totalRecords / recordsToFetch),isLoading: false,showPagination: resp.data.jobs.length > 0,});
} else {
this.setState({ data: [],showPagination: false });
}
ReactTooltip.rebuild();
};
getcell(row) {
let value = row.value !== undefined && row.value !== null ? row.value : '';
if (row.column.Header === 'Submitted') {
value = this.getFormattedDate(value);
}
if (row.column.Header === 'Problem Summary') {
value = Array.isArray(value) ? value.join('. ') : value;
}
if (row.column.Header === 'Quotes') {
value = JSON.stringify(value);
}
if (row.column.Header === 'actions') {
return (
<>
<div
id="view"
classname="react-table-cell-style"
style={{ display: 'inline',cursor: 'pointer' }}>
{' '}
<a
rel="noopener noreferrer"
target="_blank"
href={`/job/${row.original.userId}/${row.original.jobId}`}>
View
</a>
</div>{' '}
<div
id="edit"
classname="react-table-cell-style"
style={{ display: 'inline',cursor: 'pointer' }}>
| Edit
</div>{' '}
<div
id="viewQuote"
style={{ display: 'inline',cursor: 'pointer' }}
classname="react-table-cell-style">
{value > 0 && `| Quote${value > 1 ? 's' : ''}`}
</div>
</>
);
}
return (
<div data-tip={row.column.Header + ' : ' + value} classname="react-table-cell-style">
<span>{value}</span>
</div>
);
}
getHeader(headerName,valueaccessor,sortable = true) {
const { isFilterable } = this.state;
const headerClassname = 'react-table-header';
return {
headerClassname: headerClassname,Header: headerName,accessor: valueaccessor,Cell: row => this.getcell(row),filterable: headerName === 'actions' ? false : isFilterable,sortable: sortable,width: headerName === 'actions' ? 140 : undefined,};
}
render() {
let jobColumns = [
this.getHeader('Job ID','jobId'),this.getHeader('User ID','userId'),this.getHeader('Name','name'),this.getHeader('Email','email'),this.getHeader('Submitted','submitted'),this.getHeader('Status','status'),this.getHeader('Phone Number','number'),this.getHeader('Device','device'),this.getHeader('Make','make'),this.getHeader('Model','model'),this.getHeader('Problem Summary','problemSummary'),this.getHeader('Anything else?','anythingElse'),this.getHeader('Postcode','postcode'),this.getHeader("T's Matched",'techspertMatchedCount'),this.getHeader('Not Available','techspertNotAvailable'),this.getHeader('Quotes','quotesCount'),this.getHeader('Viewed Quote','viewedQuote'),this.getHeader('Chatted with T','isChatted'),this.getHeader('Got to Payment','gotToPayment'),this.getHeader('actions','quotesCount',false),];
const {
data,isFilterable,} = this.state;
const setfilters = async () => {
const { isFilterable } = this.state;
await this.setState({ isFilterable: !isFilterable });
this.getJobs();
};
return (
<div classname="jobsTable-Container">
<div classname="jobsTable_show-filter">
<input
type="checkbox"
onChange={setfilters}
checked={isFilterable}
value={isFilterable}
/>
Show Filters
</div>
<ReactTable
data={data}
columns={jobColumns}
filterable
/>
</div>
);
}
}
export default JobsTable;
我要提出的问题是,可以在await
时使用setfilters
吗?因为如果我不这样做并调用getJobs
methood,则不会更新旧值。那可以吗?