semantic 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道具做了同样的事情但得到了同样的错误

如何获取默认选项dropdown？

Answer 1

你离结果不远了.

您可以在文档中提供defaultValue道具中的一系列值.

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

编辑:这是一个实例