Clearing-Dropdown-Auswahl office-ui-fabric reagieren Komponente

Question

Ich habe Probleme Clearing Auswahl in der Dropdown-Liste. Manchmal muss ich die Auswahl eines Dropdown-Menüs löschen, da sich die Population der Optionen ändert. Wenn eine neue Optionslänge kleiner ist als die vorherige, werden die Auswahlpunkte außerhalb des Bereichs angezeigt, der einen Fehler ergibt.

Einfaches Beispiel: (siehe: [https://developer.microsoft.com/en-us/fabric#Variants][1])

<Dropdown 
 
       selectedKey={ selectedItem && selectedItem.key } 
 
       onChanged={ item => this.setState({selectedItem: item}) } 
 
       options={ 
 
       [ 
 
        { key: 'A', text: 'Option a' }, 
 
        { key: 'B', text: 'Option b' }, 
 
       ] 
 
       } 
 
/>

Das einzige, was ich denken kann, ist, dass vielleicht selectedKey steuern, dh Einstellung selectedItem.key auf null/undefined klar, aber ich habe kein Glück mit dieser Lösung.

Answer 1

Das Problem, das ich hatte war, dass ich nicht meine Optionen und die ausgewählte ID zur gleichen Zeit geändert. Was ich tat, war, dass ich jeden Drop-Down mit einem Objekt verknüpfen:

// ...async call .then((newFruits) => ... 
 
this.fruits = { 
 
    selectedId: null, 
 
    options: ['My','newly', 'fetched','fruits','array'] 
 
};

... wo Früchte Ihre beobachtbare Array sein würden.

<Dropdown 
 
    selectedKey={ fruits && fruits.selectedId } 
 
    onChanged={ this.myFuncThatCallsApiWithNewId } 
 
    options={fruits.options} 
 
/>