Semantik Ui reagieren standardmäßig ausgewählte Optionen in Dropdown

Question

Ich möchte standardmäßig ausgewählte Optionen in meinem dropdown. Der folgende Code funktioniert, wenn ich die ausgewählten Optionen hinzufügen, aber mit dem Standard gewählten Optionen nicht machen:

render() { 
     return (
      <Form onSubmit={this.handleFormSubmit}> 
       <Form.Dropdown 
        placeholder="Select Options" 
        fluid multiple selection 
        options={this.state.options} 
        onChange={this.handleMultiChange} 
       /> 
       <Button type="submit">Submit</Button> 
      </Form> 
     ); 
    } 

Ich versuchte defaultSelectedLabel={this.state.selected} hinzufügen.

this.state.selected ist ein Array von Optionen standardmäßig ausgewählt, deren Wert gilt:

render() { 
     return (
      <Form onSubmit={this.handleFormSubmit}> 
       <Form.Dropdown 
        placeholder="Select Options" 
        fluid multiple selection 
        options={this.state.options} 
        onChange={this.handleMultiChange} 
        defaultSelectedLabel={this.state.selected} 
       /> 
       <Button type="submit">Submit</Button> 
      </Form> 
     ); 
    } 

aber ich erhalte die folgende Warnung:

Warning: Failed prop type: Invalid prop defaultSelectedLabel supplied to Dropdown.

tat ich das gleiche mit defaultValue prop aber bekam der gleiche Fehler

Wie bekomme ich standardmäßig ausgewählte Optionen in meinem dropdown?

Answer 1

Sie waren nicht weit vom Ergebnis.

Sie können ein Array von Werten in den defaultValue Requisiten als the docs said bereitstellen.

defaultValue {Zahl | Zeichenkette | ArrayOf} Anfangswert oder Wert Array wenn mehrere.

Hier ein Beispiel:

class YourComponent extends Component { 
    componentWillMount() { 
    this.setState({ 
     options: [ 
     {value:'1', text:'A'}, 
     {value:'2', text:'B'}, 
     {value:'3', text:'C'}, 
     ], 
     selected: ['1', '2'], // <== Here, the values of selected options 
    }); 
    } 

    ... 

    render() { 
    return (
     <Form onSubmit={this.handleFormSubmit}> 
     <Form.Dropdown 
      placeholder="Select Options" 
      fluid multiple selection 
      options={this.state.options} 
      onChange={this.handleMultiChange} 
      defaultValue={this.state.selected} // <== here the default values 
     /> 
     <Button type="submit">Submit</Button> 
     </Form> 
    ); 
    } 
} 

EDIT: Here is a live example