当值状态改变时，MultiSelect 不更新值（PrimeReact UI）

Question

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

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

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

为了完成这个，我将过滤器逻辑分解成一个单独的 class，其中包含它们的状态和逻辑。

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

我想我对 class 组件缺少一些理解，因为我通常使用功能组件。在这种情况下，我使用了 class 组件，这样我就可以通过 DropDownFilter.filterElement() 从实例化的 DropDownFilter class 访问 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;

Answer 1

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

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

当值状态改变时，MultiSelect 不更新值（PrimeReact UI）

MultiSelect does not update value when value state changes (PrimeReact UI)

reactjs

primereact