Reactjs-使用react select预选选项

我使用react select（反应选择）框允许用户从下拉菜单中选择多个选项。我想知道是否有可能预先选择一些已经填充了selectbox的选项。我已经为该项目创建了一个沙盒：

这是调用SelectBox的仪表板，在该状态下，我有预选选项，我希望这些选项已经被选中。在本例中，我希望已选择选项1和选项3：

import React, { Component } from "react";
import SelectBox from "./dropdown";

class Dashboard extends Component {
  constructor() {
    super();
    this.state = {
      currentOptions: [],
      preselectedOptions: ["Option 1", "Option 3"]
    };
  }

  updateOptions(selected) {
    this.setState({
      currentOptions: selected
    });
  }

  showSelected() {
    alert(this.state.currentOptions.length + " selected");
  }

  render() {
    return (
      <div>
        <SelectBox selectedOptions={this.updateOptions.bind(this)} />
        <br />

        <button onClick={() => this.showSelected()}>Selected</button>
      </div>
    );
  }
}

export default Dashboard;

这是选择框：

import React, { Component } from "react";
import Select from "react-select";

class SelectBox extends Component {
  constructor(props) {
    super(props);
    this.customStyles = {
      input: styles => {
        return {
          ...styles,
          height: "45px"
        };
      }
    };
    this.handleChange = this.handleChange.bind(this);
    this.options = [];

    this.options.push({ value: "Option 1", label: "Option 1" });
    this.options.push({ value: "Option 2", label: "Option 2" });
    this.options.push({ value: "Option 3", label: "Option 3" });
    this.options.push({ value: "Option 4", label: "Option 4" });
    this.options.push({ value: "Option 5", label: "Option 5" });
  }

  handleChange(e) {
    this.props.selectedOptions(e);
  }

  render() {
    return (
      <div>
        <Select
          isMulti
          maxMenuHeight="150px"
          styles={this.customStyles}
          options={this.options}
          onChange={this.handleChange}
          className="basic-multi-select"
          classNamePrefix="select"
        />
      </div>
    );
  }
}

export default SelectBox;

谢谢

您可以通过道具执行此操作

例如，要预先选择选项1和选项2，可以通过defaultValue在数组中传递这两个选项，如下所示：

你可以通过道具来做到这一点

例如，要预先选择选项1和选项2，可以通过defaultValue在数组中传递这两个选项，如下所示：

---

在选择道具中使用预选选项作为默认道具在选择道具中使用预选选项作为默认道具你应该看看defaultValue道具

以下是指向修改后的沙箱的链接：

---

祝你好运

您应该看看defaultValue属性

以下是指向修改后的沙箱的链接：

---

祝你好运

没问题。感谢@dacre denny，他比我快几分钟就给出了同样的答案。没问题。感谢@dacre denny，他比我快几分钟就给出了同样的答案。

{/* Pass array of preselected options to defaultValue */}
<Select
      isMulti
      defaultValue={[this.options[0], this.options[1]]}
      maxMenuHeight="150px"
      styles={this.customStyles}
      options={this.options}
      onChange={this.handleChange}
      className="basic-multi-select"
      classNamePrefix="select"
    />

<Select
  isMulti
  maxMenuHeight="150px"
  styles={this.customStyles}
  options={this.options}
  defaultValue={[this.options[0], this.options[2]]}
  onChange={this.handleChange}
  className="basic-multi-select"
  classNamePrefix="select"
/>