0

https://www.primefaces.org/primereact/showcase/#/datatable https://www.primefaces.org/primereact/showcase/#/multiselect

我正在使用 PrimeReact 库来创建和自定义数据表。

我的表是动态的，将根据提供给它的数据自行构建。我根据列的数据类型为每列分配不同的过滤器，但由于列的数量可变，我必须动态创建过滤器。

为了实现这一点，我将过滤器逻辑分解到一个单独的类中，其中包含它们的状态和逻辑。

我的问题是我用作过滤器接口的 MultiSelect 组件在其值的状态更新时不会更新其值。更新状态后，该值保持为空。由于 MultiSelect 组件没有对先前选择的值的引用，我一次只能选择一个值。

我想我对类组件缺少一些了解，因为我通常使用功能组件。在这种情况下，我使用了一个类组件，以便我可以通过 DropDownFilter.filterElement() 从实例化的 DropDownFilter 类中访问 filterElement 并用作 Column 组件中的道具。

import React from 'react'
import { MultiSelect } from 'primereact/multiselect';

class DropDownFilter extends React.Component {
  constructor(props) {
    super(props);
    this.multiSelRef = React.createRef();
    this.state = {
      selectedOptions: [],
    }

    // Added following two lines trying to fix issue but they did not alter behaviour
    this.onOptionsChange = this.onOptionsChange.bind(this)
    this.filterElement = this.filterElement.bind(this)
  }
 
  onOptionsChange = (e) => {
    this.props.dt.current.filter(e.value, this.props.field, 'in');
    this.setState({selectedOptions : e.value})
  }

  filterElement = () => {
    return (
      <React.Fragment>
        <MultiSelect
          ref={this.multiSelRef}
          value={this.state.selectedOptions}  //*** value is null even when selectedOptions has been updated after user chooses option.
                                              // Confirmed by viewing value through multiSelRef
          options={this.props.options}
          onChange={this.onOptionsChange}
          optionLabel="option"
          optionValue="option"
          className="p-column-filter"
        />
      </React.Fragment>
    )
  }

}

export default DropDownFilter;
4

1 回答 1

0

我了解到在这种情况下状态不起作用，因为我在使用它时使用 new 关键字实例化 DropDownFilter。这意味着它没有被挂载到 DOM 并且不能使用状态。

我仍然在使用过滤器实现自定义列时遇到问题，但我发布了一个新问题来处理我的新发现的范围。

于 2021-03-07T22:17:43.603 回答