Reactjs

Question

我正在使用 react-select select 框来允许用户从下拉菜单中 select 多个选项。我想知道是否可以预先 select 几个选项（已经填充了 select 框）。我已经为项目创建了一个沙箱：

https://codesandbox.io/s/blissful-almeida-4iux6

这是调用 SelectBox 的仪表板，在我有 "preselectedOptions" 的状态下，这是我想要的已经 select 的选项。在这个例子中，我希望 "Option 1" 和 "Option 3" 已经 selected:

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;

谢谢！

Answer 1

您可以通过 defaultValue 道具来做到这一点。

因此，例如，要预先选择 Option 1 和 Option 2，您可以通过 defaultValue 将它们都传递到数组中，如下所示：

{/* 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"
    />

Answer 2

在 select 道具中使用 preselectedOptions 作为 defaultProps

Answer 3

你应该看看 defaultValue 道具。

<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"
/>

这里是 link 修改后的沙箱：https://codesandbox.io/s/unruffled-goldberg-lpr6w?fontsize=14

祝你好运！

Reactjs - Preselecting options with react-select

Reactjs - Preselecting options with react-select

react-select