react-select：pre-select multi-select 下拉列表中的一个值

Question

我继承了我的第一个 React 应用程序，我需要进行一个看起来非常直接的更改。

更改发生在电子邮件注册页面上，用户在该页面上有一个多 select 下拉菜单来指示他们有兴趣了解的内容。我的简单目标：使下拉菜单中的一项显示为预先 selected。（最终我会传递一个值，所以它有时只是 selected）。在此示例中，列表 values/labels 来自 DESSERT_TYPES，我想预先 select 该列表中的值之一：'Sheet cake'。

阅读 react-select docs/examples，看起来我只需要提供一个 value prop，但我尝试添加 value= 'Sheet cake'、[=18 的不同变体=]、ReactSelectAdapter 或 class 构造函数中的 Field 定义等（用冒号代替 =），但似乎没有任何效果：菜单仍然只显示占位符文本，没有任何内容 select编辑。我也尝试使用 defaultOptions 和 loadOptions，但也没有成功。

下面给出的所有代码都在同一个 EmailSignup.js 文件中。

有问题的渲染位是：

<div className="email-modal-input-wrap">
  <label className="email-modal-label" htmlFor="interest-input">
    Please select your interest from the list below:
  </label>
  <Field
    name="interest"
    component={ ReactSelectAdapter }
    options={ DESSERT_TYPES }
    placeholder="I'm interested in a project about..."
    isMulti
    value= 'Sheet cakes'
    id="interest-input"
    />
  <label className="email-modal-hidden-label" htmlFor="interest-input">Interest</label>
</div>

ReactSelectAdapter 组件是这样定义的：

const ReactSelectAdapter = ({ input, ...rest }) => (
  <Creatable
    { ...input }
    { ...rest }
    styles={DROPDOWN_STYLES}
    classNamePrefix="react-select"
    searchable
  />
)

EmailSignup class 的构造函数具有：

class EmailSignup extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      submitted: false,
      success: 'hidden',
      error: 'hidden',
      existing: 'hidden',
      modalIsOpen: true,
      location: undefined
    }

包括：

import React from 'react'
import Modal from 'react-modal'
import { Form, Field } from 'react-final-form'
import axios from 'axios'
import ProjectLogoList from './ProjectLogoList'
import PropTypes from 'prop-types'
import { PROJECT_DATA } from '../Utils/data/ProjectData'
import { DESSERT_TYPES } from '../Utils/data/dessertTypes'
import Creatable from 'react-select/lib/Creatable'
import ReactGA from 'react-ga';

我可能在这里遗漏了什么？

Answer 1

要设置初始值，将对象传递给 value 属性：

<Creatable
    // ...other props
    options={DESSERT_TYPES}
    value={{label: "Cake", value: "cake"}}
/>

react-select：pre-select multi-select 下拉列表中的一个值

react-select: pre-select a value in multi-select dropdown

javascript

reactjs

react-select