ReactJS-在onBlur之前触发点击事件

Question

我正在实现一个类似于React Select的自定义输入元素。用户将能够在输入元素中键入一些内容，并从下拉列表中选择建议(在我的情况下，我实现了一个名为SuggestionList的组件，它与下拉建议列表具有相同的用途(。

目前，SuggestionList是用户输入的输入元素的同级React组件(我将其命名为CustomInput(。

我希望当CustomInput失去焦点时，SuggestionList消失，所以我实现了一个onBlur处理程序，它可以使SuggestionList卸载或将"display"CSS属性设置为none。然而，问题是SuggestionList消失后，其onClick/handleClick事件处理程序不会被调用，该事件处理程序负责将用户选择的元素添加到所选项目列表中。

代码如下所示。在这个代码之后还有更多的解释。

const AutocompleteInput = ({...}) => {
const [suggestionVisible, setSuggestionVisible] = useState(true);
return (
....
<SystemComponent position="relative">
<SuggestionList p={theme.space[4]} 
position="absolute" 
visible={suggestionVisible}
value={value} 
handleClick={handleSelect}
ref={suggestionBox}
/>
<CustomInput 
variant="text" 
placeholder={placeholder}
value={value}
onChange={(evt) => handleInputChange(evt.target.value)}
onKeyDown={handleKeyDown}
onFocus={ () => {setSuggestionVisible(true)} }
onBlur={ () => {setSuggestionVisible(false);} }
/>
</SystemComponent>
....
)
}

因此，当用户单击SuggestionList上的某个内容时，我的CustomInput会立即失去焦点，导致SuggestionList被卸载/消失，因此不会调用其事件处理程序。因此，用户选择的项目不会添加到建议列表中。

话虽如此，我仍然希望当用户点击网站的其他部分时，SuggestionList消失，从而导致CustomInput失去焦点。有什么建议吗？

Answer 1

假设您在onClick内部调用onClickHandler()。您可以在函数onBlur中调用此函数。

例如

onBlur={ () => {onClickHandler(); setSuggestionVisible(false);} }