act-select: предварительно выбрать значение в выпадающем списке - PullRequest
Новая
       5

act-select: предварительно выбрать значение в выпадающем списке

0 голосов
/ 23 октября 2018

Я унаследовал свое первое приложение реагирования, и мне нужно внести изменения, которые выглядят ОЧЕНЬ простыми.

Изменение относится к странице регистрации по электронной почте, где пользователь имеет раскрывающееся меню с несколькими вариантами выбора, чтобы указать, о чем он хочет услышать.Моя простая цель: сделать так, чтобы один из пунктов в выпадающем меню казался предварительно выбранным.(И в конечном итоге я передам значение, поэтому оно выбирается только иногда).В этом примере значения / метки списка взяты из DESSERT_TYPES, и я хочу предварительно выбрать одно из значений в этом списке: «Листовая выпечка».

Считывая документы и примеры по реакции на выбор, похоже, мне просто нужно указать значение prop, но я попытался добавить различные варианты value= 'Sheet cake', value={{label: "Sheet cake", value: "Sheet cake"}} и т. Д. В определение поля,в ReactSelectAdapter или в конструкторе класса (с двоеточием вместо =), и кажется, что ничего не работает: меню по-прежнему просто отображает текст-заполнитель и ничего не выбрано.Я также пытался использовать 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 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';

Чего мне здесь не хватает?

1 Ответ

0 голосов
/ 23 октября 2018

Чтобы установить начальное значение, передайте объект в value prop: 

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