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

第一件事是你创建了错误的数组，如果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"
      />

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

value 必须为 string。

我修好了。您忘记了添加值属性。使用这个，检查工作代码：

const opts = [{ label: 'any', value: 1 }, { label: 'Two', value: 2 }];

const PortfolioSelector = ({ options }) => {
  if (options) {
    return (
      <div className="portfolio select-box">
        <label htmlFor="selectBox" className="select-box__label">
          Portfolio
        </label>
        <div className="select-box__container">
          <Select
            id="portf"
            options={options}
            value={this.state.opts1}
            onChange={value => this.setState({ opts1: value })}
            placeholder="Select Portfolio" />
        </div>
        <div className="separator" />
      </div>
    );
  }
  return <div>Loading</div>;
};

并调用您的组件

<PortfolioSelector options={opts} />

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

演示：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>
  );
}

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

value 属性需要形状 Array。

这是我的解决方案

演示：https://codesandbox.io/s/prod-rgb-o5svh?file=/src/App.js

法典：

import axios from 'axios'
import {useEffect, useState} from 'react'
import Select from 'react-select'
import "./styles.css";

export default function App() {
  const [users, setUsers] = useState()
  const [userId, setUserId] = useState()

  useEffect(()=>{
    const getUsers = async () => {
      const {data} = await axios.get('https://jsonplaceholder.typicode.com/users')
      setUsers(data)
    }
    getUsers()
  },[])
const options = users && users.map(user =>{
  return {label: user.name, value: user.id}
})
console.log(userId)
  return (
    <div className="App">
     {users && (
       <Select 
       placeholder='Select user...'
       isSearchable
       value={options.label}
       options={options}
       onChange={(option) => setUserId(option.value) }
       />
     )}
    </div>
  )
}

您可以简单地将 value 属性作为Selected.label

value={selectedOption.label}

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

长话短说;工作方式不同。你会期望value

value={MY_VALUE}，但它反而有效

value={{label: MY_VALUE}}.

对于任何面临 React-Select 填充或 React-select 未获得选择值的问题的人;尝试给它一个动态键属性，每次数据更改时都会更改（选项数组或选定的选项），这样它就会使用新数据重新呈现。

请同时提供标签和值对象，例如{label: ?, value: ?}

const selectedValue = options.find(x => x.value===value);
<Select
    id="portf"
    options={opts}
    onChange={value => portfolioSelector(value)}
    placeholder="Select Portfolio"
    value={label : selectedValue.label, value: (value ? selectedValue.value : "")}
/>