无法在 React-select 中获取选定的值

Question

我在将所选值放入反应选择时遇到问题，我尝试使用此方法defaultValue={{ label: 8, value: 8 }} ，但它无法正常工作。

下面是我的编码：

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

export default function App() {
  const [selectedOption, setSelectedOption] = useState("0");
  const options = [
    { value: "0", label: "0" },
    { value: "1", label: "1" },
    { value: "2", label: "2" },
    { value: "3", label: "3" },
    { value: "4", label: "4" },
    { value: "5", label: "5" },
    { value: "6", label: "6" },
    { value: "7", label: "7" },
    { value: "8", label: "8" },
    { value: "9", label: "9" },
    { value: "10", label: "10" },
    { value: "11", label: "11" },
    { value: "12", label: "12" }
  ];
  const handleTypeSelect = (e) => {
    setSelectedOption(e.value);
  };

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

结果：

我可以知道我错了哪些部分吗？ 我希望有人能指导我如何解决这个问题。 谢谢。

备注：不想改成const [selectedOption, setSelectedOption] = useState("8");

代码测试地点： https ://codesandbox.io/s/musing-moon-z8x0bv?file=/src/App.js

Answer 1

您应该使用find而不是 filter

 value={options.find(function (option) {
          return option.value === selectedOption;
 })}

find方法返回集合中匹配的第一个值。 一旦它与结果中的值匹配，它将不会检查数组集合中的剩余值。 filter方法从集合中返回数组中的匹配值。

如果 value 选项被计算为未定义，则 react-select 将选择defaultValue 。 为此，请尝试将状态设置为"" 。

const [selectedOption, setSelectedOption] = useState("");

沙盒中的完整代码：

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

export default function App() {
  const [selectedOption, setSelectedOption] = useState("");
  const options = [
    { value: "0", label: "0" },
    { value: "1", label: "1" },
    { value: "2", label: "2" },
    { value: "3", label: "3" },
    { value: "4", label: "4" },
    { value: "5", label: "5" },
    { value: "6", label: "6" },
    { value: "7", label: "7" },
    { value: "8", label: "8" },
    { value: "9", label: "9" },
    { value: "10", label: "10" },
    { value: "11", label: "11" },
    { value: "12", label: "12" }
  ];
  const handleTypeSelect = (e) => {
    setSelectedOption(e.value);
  };

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

Answer 2

试试这个吧！

我刚刚更新了代码框:)

代码沙盒链接： https ://codesandbox.io/s/stoic-jackson-l1bbii?file=/src/App.js

Answer 3

删除 Select 中的 value 属性，因为 React select 首先考虑您在 usestate 初始状态“0”中传递的 value 属性，因此它始终为 0。

如果你想默认值工作，那么只需删除选择中的值。

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

或者其他选项是删除 defaultValue 并设置要在 useState 中默认选择的值。

  const [selectedOption, setSelectedOption] = useState("8");
 <div>
      <Select
        options={options}
        onChange={handleTypeSelect}
        value={options.filter(function (option) {
          return option.value === selectedOption;
        })}
        label="Single select"
      />
 </div>