0

我正在使用流利的 ui 下拉菜单因此，当我单击下拉菜单时，默认情况下会选择第一个选项而不选择。如果我单击下拉菜单并且没有选择是否单击页面上的某个位置，则不应选择任何内容并且应关闭下拉菜单就是我想要的。请帮我解决一下这个。

以下是我正在使用的代码：

       <Dropdown
    disabled={this.state.HideLocationFilter}
    selectedKey={selectedItem1 ? selectedItem1.key : undefined}
    onChange={this._onChange1}
    placeholder="Location"
    options={[
      { key: 'UK', text: 'UK' },
      { key: 'Hyderabad', text: 'Hyderabad' },
      { key: 'Bangalore', text: 'Bangalore' },
      { key: 'Ahmedabad', text: 'Ahmedabad' },
      { key: 'Pune', text: 'Pune' },
      { key: 'Mumbai', text: 'Mumbai' },
      { key: 'USA', text: 'USA' }
    ]}
    styles={dropdownStyles}
  />

  private _onChange1 = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
    console.log(`Selection change: ${item.text} ${item.selected ? 'selected' : 'unselected'}`);
    if(item.selected == true)
    {
      this.setState({ selectedItem1: item });
    }
  };

最初是这样的：location dropdown

当我单击下拉菜单时，它默认选择（查找相同的图片）：单击时下拉

4

1 回答 1

0

当前存在一个问题，当您按下默认选项并在浏览器窗口外部单击然后在下拉菜单中单击返回时会选择第一个选项。

解决方案是查看事件的类型，如果 type === 'focus' 则短路 onChange：

const onChange = useCallback((e, value) => {
  if (e.type === 'focus') return
  // do if not type 'focus'
}, [])

在我的情况下，我还需要触发重新渲染并增强上述内容：

const onChange = useCallback((callback) => (e, value) => {
 if (e.type === 'focus') return callback()
 // do if not type 'focus'
}, [])

然后在调用它时：

<Dropdown
  {...props}
  onChange={onChange(() => setOnChangeTriggered(true))}
/>
于 2020-12-11T16:55:05.420 回答