[react-select中如何通过id设置值

Question

我使用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" }
];

要编辑表单，我想设置反应选择，但要通过ID。例如，如果State.region = 2 反应选择 结果 = region2。tip：handleChange不应更改。在这里您可以看到我的codeSandbox

Answer 1

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

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

此行已添加到渲染功能。