我正在使用react-select，我想使用ref重新打开MenuClose上的选项菜单，但我不能这样做，因为Select元素在ref中没有单击选项。
这是我的组件：
import Select from "react-select";
import { useRef } from "react";
export default function App() {
const ref = useRef();
const condition = true;
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" },
];
const handleMenuClose = () => {
if (condition) {
// reopen the menu or keep it opened
}
};
return <Select ref={ref} options={options} onMenuClose={handleMenuClose} />;
}
当我记录参考时，这是可用选项的列表：
{props: Object, context: Object, refs: Object, updater: Object, state: Object, …}
ariaOnChange
:
ƒ (value, actionMeta)
blockOptionHover
:
false
blur
:
ƒ blurInput()
buildCategorizedOptions
:
ƒ ()
buildFocusableOptions
:
ƒ ()
clearValue
:
ƒ ()
commonProps
:
{clearValue: ƒ, cx: ƒ, getStyles: ƒ, getClassNames: ƒ, getValue: ƒ, …}
context
:
{}
controlRef
:
HTMLDivElement
cx
:
ƒ ()
focus
:
ƒ focusInput()
focusedOptionRef
:
null
getCategorizedOptions
:
ƒ ()
getClassNames
:
ƒ (key, props)
getComponents
:
ƒ ()
getControlRef
:
ƒ (ref)
getElementId
:
ƒ (element)
getFocusableOptions
:
ƒ ()
getFocusedOptionRef
:
ƒ (ref)
getInputRef
:
ƒ (ref)
getMenuListRef
:
ƒ (ref)
getOptionLabel
:
ƒ (data)
getOptionValue
:
ƒ (data)
getStyles
:
ƒ (key, props)
getValue
:
ƒ ()
handleInputChange
:
ƒ (event)
initialTouchX
:
0
initialTouchY
:
0
inputRef
:
HTMLInputElement
instancePrefix
:
"react-select-3"
isComposing
:
false
menuListRef
:
null
onChange
:
ƒ (newValue, actionMeta)
onClearIndicatorMouseDown
:
ƒ (event)
onClearIndicatorTouchEnd
:
ƒ (event)
onCompositionEnd
:
ƒ ()
onCompositionStart
:
ƒ ()
onControlMouseDown
:
ƒ (event)
onControlTouchEnd
:
ƒ (event)
onDropdownIndicatorMouseDown
:
ƒ (event)
onDropdownIndicatorTouchEnd
:
ƒ (event)
onInputBlur
:
ƒ (event)
onInputFocus
:
ƒ (event)
onKeyDown
:
ƒ (event)
onMenuMouseDown
:
ƒ (event)
onMenuMouseMove
:
ƒ (event)
onOptionHover
:
ƒ (focusedOption)
onScroll
:
ƒ (event)
onTouchEnd
:
ƒ (event)
onTouchMove
:
ƒ (_ref3)
onTouchStart
:
ƒ (_ref2)
onValueInputFocus
:
ƒ (e)
openAfterFocus
:
false
popValue
:
ƒ ()
props
:
{options: Array(3), inputValue: '', menuIsOpen: false, onChange: ƒ, onInputChange: ƒ, …}
refs
:
{}
removeValue
:
ƒ (removedValue)
scrollToFocusedOptionOnUpdate
:
false
selectOption
:
ƒ (newValue)
setValue
:
ƒ (newValue, action, option)
shouldHideSelectedOptions
:
ƒ ()
state
:
{ariaSelection: Object, focusedOption: , focusedValue: null, inputIsHidden: true, isFocused: false, …}
updater
:
{isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
userIsDragging
:
undefined
_reactInternalInstance
:
{}
_reactInternals
:
{tag: 1, key: null, stateNode: Object, elementType: ƒ, type: ƒ, …}
我尝试使用 ref 但点击选项不可用