如何仅搜索多值反应选择中的选定选项？

Question

我有一个 react-select 组件，其中包含“全部”/“选定”选项卡和菜单中的搜索栏：

我可以毫无问题地搜索“全部”选项卡中的选项（正确过滤，如果搜索输入不匹配任何值，则显示 noOptionsMessage）

我在“已选择”选项卡中遇到以下问题：

• 查看没有选项的“已选择”选项卡不会显示 noOptionsMessage

• 在空的“已选择”选项卡中按空格键会添加“全部”选项卡中最后一个突出显示的选项

在“选定”选项卡中按空格后

• 在空列表中搜索与“全部”选项卡中的值匹配的输入不会导致任何更改并且不会显示 noOptionsMessage

• 使用与“全部”选项卡中的值不匹配的输入进行搜索会导致 TypeError: _props$children.filter is not a function

这里是主要的子组件

const SearchInput = (props) => {
  const { searchPlaceholder } = props.selectProps

  return (
    <input
      className="search-input"
      type="text"
      placeholder={searchPlaceholder}
      value={props.selectProps.inputValue}
      onChange={(e) => {
        //onInputChange just runs a setInput function
        return props.selectProps.onInputChange(e.currentTarget.value, {
          action: 'input-change',
        })
      }}
      onMouseDown={(e) => {
        e.stopPropagation()
        e.target.focus()
      }}
      onTouchEnd={(e) => {
        e.stopPropagation()
        e.target.focus()
      }}
      // onMenuInputFocus set to const inputFocus = () => {return setIsFocused(true)}
      onFocus={props.selectProps.onMenuInputFocus}  
    />
  )
}

const MenuTab = ({
  tabName,
  isSelected,
  group,
  onClick = (_) => {
    return _
  },
}) => {
  return (
    <div className={`menu-tab ${isSelected ? 'selected-tab' : ''}`}>
      <label className="menu-tab-label" htmlFor={tabName}>
        {tabName}
        <input
          id={tabName}
          className="menu-tab-input"
          name={group}
          type="radio"
          value={tabName.toLowerCase()}
          checked={isSelected}
          onClick={() => {
            return onClick(tabName)
          }}
        />
      </label>
    </div>
  )
}

const MenuTabList = ({ ...props }) => {
  const [selectedTab, setSelectedTab] = useState('All')
  const { id, value, searchable } = props.selectProps

  return (
    <>
      {searchable && selectedTab === 'All' && (
        <div>
          <SearchInput {...props} />
        </div>
      )}
      <MenuList {...props}>
        <div className="tab-container">
          {['All', 'Selected'].map((el) => {
            return (
              <MenuTab
                tabName={el}
                group={id}
                onClick={() => {
                  return setSelectedTab(el)
                }}
                isSelected={selectedTab === el}
              />
            )
          })}
        </div>
        {selectedTab === 'All'
          ? props.children
          : props.children?.filter((opt) => {
              return value.includes(opt.props.data)
            })}
      </MenuList>
    </>
  )
}

我已经尝试将过滤后的选项移动到它们自己的数组变量中，如果恰好长度为 0，则只返回一个空数组，但这似乎并不能解决问题。

我认为我需要让搜索输入将两个列表视为单独的实体，但如果不创建第二个 Select 组件或至少创建第二个 Menu/MenuList 组件，我想不出该怎么做。

Answer 1

我让它变得比它需要的更困难。我刚刚添加了一个函数，它只会在搜索实际返回至少一个值时过滤选定的值。

const MenuTabList = ({ ...props }) => {
  const [selectedTab, setSelectedTab] = useState('All')
  const { id, value, searchable } = props.selectProps
  const getSelectedValues = (allOptions) => {
    if (allOptions.length > 0) {
      return allOptions.filter((opt) => {
        return value.includes(opt.props.data)
      })
    }
    return null
  }

  return (
    <>
      {searchable && (
        <div>
          <SearchInput {...props} />
        </div>
      )}
      <MenuList {...props}>
        <div className="tab-container">
          {['All', 'Selected'].map((el) => {
            return (
              <MenuTab
                tabName={el}
                group={id}
                onChange={() => {
                  return setSelectedTab(el)
                }}
                isSelected={selectedTab === el}
              />
            )
          })}
        </div>
        {selectedTab === 'All'
          ? props.children
          : getSelectedValues(props.children)}
      </MenuList>
    </>
  )
}

仍在研究如何防止空间在当前位于“已选择”选项卡中时选择“全部”选项卡中最后突出显示的选项。似乎在搜索过程中也会发生这种情况