語義ui在下拉列表中選擇默認選項

Question

我想在我的dropdown中選擇默認選項。下面的代碼的工作，當我添加選定的選項，但不使用默認選擇的選項渲染：

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> 
     ); 
    } 

我嘗試添加defaultSelectedLabel={this.state.selected}。

this.state.selected是選項，其選擇值默認爲true的數組：

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> 
     ); 
    } 

，但我得到以下警告：

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

我也做了同樣用defaultValue道具，但得到相同的錯誤

如何在我的中獲得默認選擇的選項？

Answer 1

你離結果不遠了。

您可以在defaultValue道具中爲the docs said提供一組值。

defaultValue {number | string | arrayOf}初始值或值數組（如果有多個）。

下面的例子：

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> 
    ); 
    } 
} 

編輯：Here is a live example