如何使用React.js創建過濾器下拉列表？

Question

如何實現過濾器下拉菜單的邏輯？

在應用程序頁面中，我們可以管理用戶，例如：創建，編輯，刪除和顯示。 也有禁用用戶的選項。

有用於用戶的表，我需要在其上實施過濾器。

我需要按“活動”用戶過濾，這表示他們具有禁用屬性：false。 和已停用的“停用”用戶：true

這是我的過濾器下拉數組的外觀：

 const statusOptions = [
  {
    key: 'all',
    text: 'All',
    value: 'all'
  },
  {
    key: 'disabled',
    text: 'Active',
    value: false
  },
  {
    key: 'disabled',
    text: 'Deactive',
    value: true
  }
]

 <Form.Dropdown
    label="Filter by Status"
    name="disabled"
    selection
    onChange={this.handleFieldChange}
    value={disabled || 'all'}
    fluid
    options={statusOptions}
 />

處理字段更改功能：

 handleFieldChange = (e, { name, value } = {}) => {
const { onChange } = this.props
this.setState((current = {}) => {
  const next = {
    ...current,
    [name]: value
  }
  onChange && onChange(next)

  return next
})
}

知道如何以正確的方式組織此過濾器邏輯嗎？

Answer 1

您發布的代碼有些混亂，但是我認為您需要的是根據特定用戶是啟用還是禁用來更新視圖的能力。

用戶的原始數組大概是作為道具注入到組件中的。 我假設每個用戶都有一個“啟用”屬性，該屬性設置為“啟用”，“禁用”或“全部”。 我還假設您以某種方式遍歷此列表以構建您的UI，特別是類似以下內容：

<ul>
    { this.users.filter((user) => user.state === this.filterState)
      .map((relevantUser) => {
           return (
                <User {..relevantUserProps}>
           )
      })
    }
</ul>

因此，您的handleChange回調僅需要設置組件的filterState：

handleFieldChange = (event) => {
    const newFilterState = this.statusOptions.find((option) => option.text === event.target.value)).key
    this.setState({
        filterState: newFilterState,
    })

顯然，這種邏輯可能並不完全適合您的組件，但是希望您能掌握要點。 希望能有所幫助。