时间戳

首页 > 解决方案 > 从多选中清除焦点上的搜索值 - 多选反应下拉（React JS）

javascript - 从多选中清除焦点上的搜索值 - 多选反应下拉（React JS）

问题描述

我想清除聚焦在多选字段之外的搜索文本 默认情况下，包中不提供 onBlur

默认情况下，搜索值保持在焦点之外 搜索词在焦点之外持续存在

import { Multiselect } from 'multiselect-react-dropdown';

版本：“多选反应下拉”：“^2.0.1”

<Multiselect
options={categoryList} // Options to display in the dropdown
displayValue="name" //Label to be displayed from the object
avoidHighlightFirstOption={true}
// closeIcon="cancel"
emptyRecordMsg={"No Product type available"}
selectedValues={multiSelectedCat && multiSelectedCat.length > 0 ? multiSelectedCat : []} // Preselected value to persist in dropdown
onSelect={multiOnSelectCat} // Function will trigger on select event
onRemove={multiOnRemoveCat} // Function will trigger on remove event />

我如何实现 onBlur 功能，因为它不是默认提供的，而且我在文档中找不到太多。

要求是清除 Focus out 上的搜索文本。

标签： javascriptjqueryreactjstypescript

解决方案

您可以使用 ref 回调并结合 blur 来更新 Multiselect 中的 inputValue 状态。

你可以看到这个例子： https ://codesandbox.io/s/react-playground-forked-kpgmo?file=/index.js

this.multiselectRef = (element) => {
  if (element) {
    $("#search_input").blur(function() {
      setTimeout(function() {
        element.setState({
          inputValue: ""
        });
      }, 1);
    });
  }
};

推荐阅读