Javascript 语义ui在下拉列表中反应默认选定选项

我希望在我的

下拉列表中选择默认选项。当我添加选定选项但不使用默认选定选项渲染时，以下代码有效：

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

但我得到以下警告：

警告：失败的道具类型：为下拉列表提供的道具默认选择标签无效。

我对
defaultValue
prop做了同样的操作，但得到了相同的错误

如何在我的
下拉列表中获取默认的选定选项？
您离结果不远了

您可以在
defaultValue
props中提供一个值数组，如下所示

默认值{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>
    );
  }
}

class YourComponent扩展组件{
组件willmount（）{
这是我的国家({
选项：[
{值：'1'，文本：'A'}，
{值：'2'，文本：'B'}，
{值：'3'，文本：'C'}，
],
所选：['1'，'2'，/也适用于单个选择：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Form, Button } from 'semantic-ui-react';
import './style.css';

class App extends Component {
  componentWillMount() {
    this.setState({
      options: [
        {value:'1', text:'Lamborghini Aventador 2016'},
        {value:'2', text:'VW Beetle 1971'},
        {value:'3', text:'Ford Mustang'},
      ],
      selected: '1',
    });
  }

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

render(<App />, document.getElementById('root'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“语义ui反应”导入{Form，Button}；
导入“/style.css”；
类应用程序扩展组件{
组件willmount（）{
这是我的国家({
选项：[
{值：'1'，文本：'Lamborgini Aventador 2016'}，
{值：'2'，文本：'VW甲壳虫1971'}，
{值：'3'，文本：'Ford Mustang'}，
],
已选定：“1”，
});
}
render（）{
返回(
提交
);
}
}
render（，document.getElementById（'root'））；
@user2456977这对我来说很有效。我更新了我的答案，提供了一个你可以看到我结果的实例。你能复制一个选项数据样本吗？我想你对
值
键有问题最后解决了--我在componentWillReceiveProps中设置了所有这些数据--选项和选定项--而不是构造函数tor或组件将安装。非常感谢much@user2456977很高兴听到这个消息：）要进一步了解您的问题，您可以看一看：
React不调用componentWillReceiveProps，在装载过程中使用初始道具。
问题是，这只适用于“多个”下拉菜单。对于非多个下拉菜单，似乎无法执行此操作。如果执行此操作，请注意，可能会发生的任何状态处理n您的
handleMultiChange
处理程序（例如，设置稍后将在API调用中使用的状态值）不会发生，因为当您预先设置默认值时，不会调用
handleMultiChange
。在这种情况下，您可能需要实现一些状态转换，就像用户从下拉列表中选择了选项一样。
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Form, Button } from 'semantic-ui-react';
import './style.css';

class App extends Component {
  componentWillMount() {
    this.setState({
      options: [
        {value:'1', text:'Lamborghini Aventador 2016'},
        {value:'2', text:'VW Beetle 1971'},
        {value:'3', text:'Ford Mustang'},
      ],
      selected: '1',
    });
  }

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

render(<App />, document.getElementById('root'));