Semantic UI React下拉菜单中的默认选定选项

Question

我想在我的下拉菜单中默认选择一些选项。当我添加了选定选项时，下面的代码可以工作，但如果没有默认选项，则无法呈现：

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

但是我收到了以下警告：

警告：传递给下拉框的defaultSelectedLabel属性无效。

我同样尝试使用defaultValue属性，但是得到了相同的错误。

如何设置默认选择的选项在我的dropdown组件中？

- user2456977

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

编辑： 这里有一个实时示例

- Adrien Lacroix

---

@user2456977，这对我有效。我更新了我的答案，提供了一个实时示例，您可以在其中查看我的结果。您能否复制一份选项数据的样本？我认为您在value键方面存在问题。 - Adrien Lacroix

终于解决了——我把所有这些数据——选项和选择——都设置在 componentWillReceiveProps 中，而不是构造函数或 componentWillMount 中。非常感谢！ - user2456977

@user2456977 很高兴听到这个好消息 :) 为了更好地理解您的问题，您可以在此处查看：[https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops]：`React在挂载期间不会使用初始属性调用componentWillReceiveProps。` - Adrien Lacroix

问题在于这仅适用于“多选”下拉菜单。似乎没有办法对非多选下拉菜单执行此操作。 - rjurney

如果您这样做，请注意，任何状态处理都不会在您的handleMultiChange处理程序中发生，例如设置稍后将用于API调用的状态值，因为当您预设默认值时，handleMultiChange永远不会被调用。在这种情况下，您可能需要实现一些状态转换，就好像用户从下拉菜单中选择了选项一样。 - jarmod

Answer 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'));

- Rastislav