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,
    })

很显然，这种逻辑可能并不完全适合您的组件，但是希望您能掌握要点。希望有帮助。

如何使用React.js创建过滤器下拉列表？

1 个答案: