office-ui-fabric - 过滤器详情列表

Question

谁能告诉我如何过滤详细信息列表？例如，假设我有以下列表：

列表

如何过滤列表，以便当我键入“拒绝”时，它只会显示状态为“拒绝”的项目</p>

这是我尝试过的代码（来自文档https://developer.microsoft.com/en-us/fabric#/components/detailslist）：

private _onChangeText = (text: any) => {
    this.setState({ items: text ? this.state.items.filter(i => 
    i.Status.indexOf(text) > -1) : this.state.items });
}

<TextField
  label="Filter by name:"
  onChanged={this._onChangeText}
/>

谢谢！

Answer 1

这是一个Codepen，我在其中过滤一组项目以查看文本是否存在于任何项目的值中（不区分大小写）。它类似于您在原始问题中链接的文档示例。我希望这会有所帮助！

let COLUMNS = [
  { 
    key: "name", 
    name: "Name", 
    fieldName: "Name", 
    minWidth: 20, 
    maxWidth: 300,
  },
  { 
    key: "status", 
    name: "Status",
    fieldName: 'Status',
    minWidth: 20, 
    maxWidth: 300
  }
];


const ITEMS = [
  {
    Name: 'xyz',
    Status: 'Approve'
  },
  {
    Name: 'abc',
    Status: 'Approve'
  },
  {
    Name: 'mno',
    Status: 'Reject'
  },
  {
    Name: 'pqr',
    Status: 'Reject'
  }
]

const includesText = (i, text): boolean => {
  return Object.values(i).some((txt) => txt.toLowerCase().indexOf(text.toLowerCase()) > -1);
}

const filter = (text: string): any[] => {
  return ITEMS.filter(i => includesText(i, text)) || ITEMS;
}

class Content extends React.Component {

  constructor(props: any) {
    super(props);

    this.state = {
      items: ITEMS
    }
  }

  private _onChange(ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string) {
    let items = filter(text);
    this.setState({ items: items });
  }

  public render() {
    const { items } = this.state;
    return (
      <Fabric.Fabric>
          <Fabric.TextField label="Filter" onChange={this._onChange.bind(this)} />
          <Fabric.DetailsList 
            items={ items } 
            columns={ COLUMNS }              
          />        
      </Fabric.Fabric>
    );
  }

}

ReactDOM.render( 
  <Content />,
  document.getElementById('content')
);