アイテムを削除するときにSemantic-React multiple selectionドロップダウンを開いたままにする

Question

選択したアイテムを削除してもonBlurを閉じると、Semanti-UI-Reactから複数の選択ドロップダウンを開いたままにしています。 closeOnBlurをfalseに設定すると、選択した項目を削除する動作が得られますが、ドロップダウンの矢印をクリックして閉じる必要があります。関連するイベントにプラグインして、手動で目的の動作を達成できる方法があるかどうかを確認しましたが、closeOnBlurがfalseに設定されていれば奇妙なことに、私はonBlurイベントを取得しません。ここで

は私のコードです：

<Dropdown 
    style={{whiteSpace: 'nowrap', zIndex: 9999}} 
    upward={true} 
    search={true} 
    multiple={true} 
    selection={true} 
    loading={loading} 
    options={options} 
    value={this.props.selectedCodes || []} 
    closeOnBlur={false} 
    onBlur={() => console.log('onBlur')} 
    onChange={ (e, d) => { 
     console.log('onChange'); 
     const value = d.value as string[]; 
     const displayValues = value.map(code => { 
      const lookupEntry = options.find(i => i.value === code); 
      return lookupEntry ? lookupEntry.text : ''; 
     }); 
     const displayValue = displayValues.reduce(
      (result, text) => { 
       return `${result}, ${text}`; 
      }, ''\ 
     ); 
     this.props.onSelectionChange(value, displayValue); 
    }} 
    onClose={() => console.log('onClose')} 
/> 

closeOnBlurがfalseに設定されている場合、onBlurイベントも発生しません理由として、私の希望の行動、または洞察力を達成するためにどのように任意の提案ですか？

Answer 1

このコンポーネントは、オープン/クローズドステータスビューopenの支柱を手動で制御できます。だから、カスタムクラスを含むクラスを介してその小道具を管理するだけです。

getInitialState() { 
    return { open: false }; 
}, 

handleClose() { 
    this.setState({open: false}); 
}, 

handleOpen() { 
    this.setState({open: true}); 
} 

render() { 
    return <Dropdown 
      open={this.state.open} 
      onBlur={this.handleClose} 
      onFocus={this.handleOpen} 
      ... 
      />;