如何在反应选择中设置值答案

【问题标题】：how to set value in react-select如何在反应选择中设置值
【发布时间】：2020-05-27 22:51:19
【问题描述】：

如何在 react-select 中通过 id 设置值比如我想根据ID的值来选择标签值。 id = "2" 结果 = "夏天"

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = { selectedOption: "" };
  }

  options = [
    { id: "1", value: "Spring", label: "Spring" },
    { id: "2", value: "Summer", label: "Summer" },
    { id: "3", value: "Autumn", label: "Autumn" },
    { id: "4", value: "Winter", label: "Winter" }
  ];

  handleChange = selectedOption => {
    this.setState({ selectedOption });
  };

  render() {
    return (
      <Select
        value={this.state.selectedOption}
        onChange={this.handleChange}
        options={this.options}
      />
    );
  }
}

在这里你可以看到我的CodeSandbox。提前感谢您的帮助和指导

【问题讨论】：

标签： reactjs react-select

【解决方案1】：

请检查这个例子：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import Select from "react-select";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedOption: ''
    };
  }

  options = [
    { id: "1", value: "Spring", label: "Spring" },
    { id: "2", value: "Summer", label: "Summer" },
    { id: "3", value: "Autumn", label: "Autumn" },
    { id: "4", value: "Winter", label: "Winter" }
  ];

  handleChange = selectedOption => {
    this.setState({ selectedOption });
  };

  render() {
    return (
      <div>
        <Select
          value={this.state.selectedOption}
          onChange={this.handleChange}
          options={this.options}
        />
        <button
          onClick={() => {
            let summer = this.options.find(o => o.id === "2");
            this.setState({ selectedOption: summer });
          }}
        >
          Set Summer
        </button>
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById("app"));

在这里你可以看到我的CodeSandbox.

【讨论】：

【解决方案2】：

react-select 返回整个对象 {id, value, label} onChange。设置选定的标签值

  handleChange = selectedOption => {
    this.setState({ selectedOption: selectedOption.value }); // selected option value
  };

【讨论】：