항목을 제거 할 때 Semantic-React 다중 선택 드롭 다운을 열어 두십시오.

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} 
      ... 
      />;