React-select在字段中不显示所选值

Question

我有一个我这样定义的react-select组件：

<Select
            id="portf"
            options={opts}
            onChange={value => portfolioSelector(value)}
            placeholder="Select Portfolio"
          />

与opts = [{label: any, value:1}, {label:Two, value:2}]。

选择后的值将通过portfolioSelector功能存储在状态中。问题是当我选择一个值时，它没有显示在选择字段中。我的主要组成部分是：

const PortfolioSelector = ({
  opts,
  portfolioSelector
}) => {
  if (opts) {
    return (
      <div className="portfolio select-box">
        <label htmlFor="selectBox" className="select-box__label">
        Portfolio
        </label>
        <div className="select-box__container">
          <Select
            id="portf"
            options={opts}
            onChange={value => portfolioSelector(value)}
            placeholder="Select Portfolio"
          />
        </div>
        <div className="separator" />
      </div>
    );
  }
  return (
    <div>Loading</div>
  );
};

你知道为什么吗？

Answer 1

处理value得非常糟糕，它需要像这里这样的黑客，解释在这里。

长话短说; 工作value原理不同。你会期望

value={MY_VALUE}，但它却有效

value={{label: MY_VALUE}}。

Answer 2

这是我使用的替代解决方案。

演示： https : //codesandbox.io/s/github/mkaya95/React-Select_Set_Value_Example

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

export default function App() {
  const [selectedOption, setSelectedOption] = useState("none");
  const options = [
    { value: "none", label: "Empty" },
    { value: "left", label: "Open Left" },
    { value: "right", label: "Open Right" },
    {
      value: "tilt,left",
      label: "Tilf and Open Left"
    },
    {
      value: "tilt,right",
      label: "Tilf and Open Right"
    }
  ];
  const handleTypeSelect = e => {
    setSelectedOption(e.value);
  };

  return (
    <div>
      <Select
        options={options}
        onChange={handleTypeSelect}
        value={options.filter(function(option) {
          return option.value === selectedOption;
        })}
        label="Single select"
      />
    </div>
  );
}

Answer 3

<Select
options={this.props.locale}
onChange={this.selectCountryCode}
value={{label : this.state.selectedCountryLabel}}
/>

value 属性需要形状数组。

Answer 4

首先，您创建了错误的数组，如果 label: any 或 Two 是字符串，则必须添加双引号。看这个：

opts = [{label: "any", value:1}, {label:"Two", value:2}]

其次，您必须记住本例中的选项是 opts 是一个具有标签和值的对象数组，您想要添加到状态中的数据是什么？

      <Select
        id="portf"
        options={opts}
        onChange={value => portfolioSelector(value.value /* or if you want to add label*/ value.label)}
        placeholder="Select Portfolio"
      />