Reactjs 如何在react select中按id设置值

我使用react-select。我有许多react-select，它们通过handleChange更改状态内部的值。最后它们存储在某个地方（为了简化，我编写了一个react-select）。 到目前为止没有问题

export const regionOptions = [
  { id: "1", value: "region 1", label: "region 1" },
  { id: "2", value: "region 2", label: "region 2" },
  { id: "3", value: "region 3", label: "region 3" },
  { id: "4", value: "region 4", label: "region 4" },
  { id: "5", value: "region 5", label: "region 5" },
  { id: "6", value: "region 6", label: "region 6" },
  { id: "7", value: "region 7", label: "region 7" },
  { id: "8", value: "region 8", label: "region 8" }
];

要编辑表单，我想设置react select，但要按ID设置。例如，如果State.region=2react selectResult=region2。 提示：不应更改手柄更改。

---

在这里您可以看到我的

我在您的代码沙盒中的渲染函数中做了一些修改。 react select接受值和标签对数组作为选项，因此需要将区域选项转换为react select可以正确接受的数据

const tempOptions = regionOptions.map(option => ({
      value: option.id,
      label: option.label
    }));

---

这一行被添加到渲染函数中。

我在代码沙盒中的渲染函数中做了一些修改。 react select接受值和标签对数组作为选项，因此需要将区域选项转换为react select可以正确接受的数据

const tempOptions = regionOptions.map(option => ({
      value: option.id,
      label: option.label
    }));

---

这一行被添加到渲染函数中。

您可以尝试以下示例：

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

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
从“反应选择”导入选择；
类MyComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
已选择选项：“”
};
}
选项=[
{id:“1”，值：“Spring”，标签：“Spring”}，
{id:“2”，值：“Summer”，标签：“Summer”}，
{id:“3”，值：“秋”，标签：“秋”}，
{id:“4”，值：“冬季”，标签：“冬季”}
];
handleChange=selectedOption=>{
this.setState（{selectedOption}）；
};
render（）{
返回(
{
让summer=this.options.find（o=>o.id==“2”）；
this.setState（{selectedOption:summer}）；
}}
>
夏天
);
}
}
ReactDOM.render（，document.getElementById（“app”）；

您可以尝试以下示例：

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

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
从“反应选择”导入选择；
类MyComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
已选择选项：“”
};
}
选项=[
{id:“1”，值：“Spring”，标签：“Spring”}，
{id:“2”，值：“Summer”，标签：“Summer”}，
{id:“3”，值：“秋”，标签：“秋”}，
{id:“4”，值：“冬季”，标签：“冬季”}
];
handleChange=selectedOption=>{
this.setState（{selectedOption}）；
};
render（）{
返回(
{
让summer=this.options.find（o=>o.id==“2”）；
this.setState（{selectedOption:summer}）；
}}
>
夏天
);
}
}
ReactDOM.render（，document.getElementById（“app”）；

谢谢。但我看不到MyDesandbox中有任何变化。这是链接。如果可能，react select的数量将随区域的每次变化而变化。您可以分享上述示例吗？这正是我的要求。请使用区域编号（作为ID）然后react select返回值谢谢。但我在MyDesandbox中没有看到任何更改。这是链接。如果可能，react select的数量将随区域的每次更改而更改。您可以分享上述示例吗？这正是我的请求。获取一个区域编号（作为ID），然后react select返回值