reactjs - React-选择 MenuList 内的自定义输入

Question

我正在尝试使用 React-Select 选项创建自定义选择。我希望不在控制框中进行搜索，而是在菜单中进行搜索。我试过这个:

import React from "react";
import Select, { components } from "react-select";
import { colourOptions, groupedOptions } from "./docs/data";


const MenuList = props => {
  return (
    <components.MenuList {...props}>
      <components.Input {...props} />;
      {props.selectProps.inputValue.length > 1 ? props.children : ""}
    </components.MenuList>
  );
};
export default () => (
  <Select
    defaultValue={colourOptions[1]}
    options={groupedOptions}
    components={{ MenuList }}
  />
);

问题是我收到错误消息

Uncaught Invariant Violation: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML

我猜 react 选择的components.Input正在渲染input标签内的另一个div或类似的东西。有人知道如何做到这一点吗？

Answer 1

作为 MenuList 的一部分输入。

它的灵感来自 https://codesandbox.io/embed/m75wlyx3oy解决方案。

默认的MenuList与CustomMenuWithInput交换，后者首先在下拉列表中显示选项。选项列表由 { props.children } 提供。最后一个选项下方是输入字段。

onFocus={onMenuInputFocus} 防止关闭输入中键入的每个字母的下拉菜单。

const CustomMenuWithInput = ({ selectProps: { onMenuInputFocus }, ...props }) => {
  const [value, setValue] = useState('')

  return (
    <div>
      { props.children }
      <input
        id='add-option'
        label='Add option'
        placeholder='option'
        autoCorrect='off'
        autoComplete='off'
        spellCheck='false'
        type='text'
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onMouseDown={(e) => {
          e.stopPropagation()
          e.target.focus()
        }}
        onFocus={onMenuInputFocus}
      />
    </div>
  )
}

const SelectView = ({ onChange }) => {
  const [inputValue, setInputValue] = useState('')
  const [isFocused, setIsFocused] = useState(false)

  return (
    <Select
      id=''
      label={'List'}
      options={list}
      onChange={opt => {
        onChange(opt.value, opt)
        setIsFocused(false)
      }}
      onInputChange={setInputValue}
      onMenuInputFocus={() => setIsFocused(true)}
      inputValue={inputValue}
      placeholder='Select...'
      components={{
        MenuList: CustomMenuWithInput,
      }}
      isSearchable
      {...{
        menuIsOpen: isFocused || undefined,
        isFocused: isFocused || undefined
      }}
    />
  )
}