PrimeReact DataTable：如何（视觉上）取消选择行

Question

我正在使用一个数据表，该表通过复选框以及全局搜索具有行 selection。问题是，如果我 select 一行（或多行）然后通过全局搜索进行过滤，selected 行的位置保持不变，e。 G。如果我 select 第一行和第二行过滤，第一行和第二行仍然 selected 即使它们现在由于过滤而具有完全不同的内容。我什至设法重置了状态中的基础 selection，导致状态中没有任何内容被 selected，但复选框仍处于选中状态。重置 DataTable 没有任何作用。

如何（至少在视觉上）重置复选框？谢谢！

我的代码如下：

<InputText type="search" onInput={e =>
    this.setState({
            globalFilter: e.target.value,
            selectedProjectListEntries: []
    })}
    placeholder={this.intl.formatMessage({id: "input.global-search.hint"})}
    className={"form-control"}/>  
              
<DataTable ref={el => this.dataTable = el}
   value={this.state.projectListEntries} autoLayout={false}
   globalFilter={this.state.globalFilter} rows={20}
   className={'table table-striped'}
   selection={this.state.selectedProjectListEntries}
   onSelectionChange={e => this.setState({selectedProjectListEntries: e.value})}>
       <Column selectionMode="multiple"/>
       ... Columns ...

Answer 1

如果其他人在没有 PrimeReact CSS 和主题的情况下使用 DataTable，则需要以下 CSS 才能使其正常工作（除了使用 PrimeIcons）：

body .p-checkbox {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  width: 20px;
  height: 20px;
}

.p-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.p-hidden-accessible input, .p-hidden-accessible select {
  -webkit-transform: scale(0);
  transform: scale(0);
}

body .p-checkbox .p-checkbox-box.p-highlight {
  border-color: $highlight_color;
  background-color: $highlight_color;
  color: #ffffff;
}

body .p-checkbox .p-checkbox-box {
  border: 1px solid #a6a6a6;
  background-color: #ffffff;
  width: 20px;
  height: 20px;
  text-align: center;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.p-checkbox .p-checkbox-box {
  width: 1.125em;
  height: 1.125em;
  line-height: 1.125em;
  border-radius: 2px;
  text-align: center;
}

body .p-checkbox .p-checkbox-box .p-checkbox-icon {
  overflow: hidden;
  position: relative;
  font-size: 18px;
}

.p-checkbox .p-checkbox-icon {
  display: block;
}

body .p-datatable .p-datatable-tbody > tr.p-highlight {
  background-color: $highlight_color;
  color: #ffffff;
}

PrimeReact DataTable：如何（视觉上）取消选择行

PrimeReact DataTable: How to (visually) deselect rows

jsx

reactjs

primereact