Как получить доступ к реквизитам и состоянию React-Select HOC

Я использую response-select v2.0, чтобы создать раскрывающийся список с предопределенными элементами . Я подключил его к запросу Parse, который возвращает параметры с текстовым поиском.

Моя проблема в том, что я не могу понять, как передать выбранное значение родительскому компоненту.

Компонент называется RestaurantSelect и выглядит так (в сокращении):

import React, { Component } from 'react'
import AsyncSelect from 'react-select/lib/Async'

type State = {
  inputValue: string
}

const filterRestaurants = (inputValue: string) => {
  return (
    // ... results from Parse query (this works fine)
  )
}

const promiseOptions = inputValue => (
  new Promise(resolve => {
    resolve(filterRestaurants(inputValue))
  })
)

export default class WithPromises extends Component<*, State> {
  state = { inputValue: '' }

  handleInputChange = (newValue: string) => {
    const inputValue = newValue.replace(/\W/g, '')
    this.setState({ inputValue })
    return inputValue
  }

  render() {
    return (
      <AsyncSelect
        className="select-add-user-restaurant"
        cacheOptions
        defaultOptions
        placeholder="Start typing to select restaurant"
        loadOptions={promiseOptions}
      />
    )
  }
}

Родительский компонент, вызывающий RestaurantSelect, выглядит так:

import React from 'react'
import RestaurantSelect from './RestaurantSelect'

class AddUserRestaurant extends React.Component {
  constructor() {
    super()

    this.state = {
      name: ''
    }
  }

  addUserRestaurant(event) {
    event.preventDefault()

    // NEED INPUT VALUE HERE!
  }

  render() {
    return (
      <form onSubmit={(e) => this.addUserRestaurant(e)}>

        <RestaurantSelect />

        <button type="submit">Add</button>
      </form>
    )
  }
}

export default AddUserRestaurant

Если я проверю компонент, я вижу, что атрибут input value соответствует набранному тексту, но когда значение выбирается из раскрывающегося списка, оно исчезает (т. Е. Переходит от <input value="Typed name" /> к <input value />. Появляется отдельный элемент <span> со значением метки, но я не хочу брать это из DOM, это не похоже на предполагаемый метод.

Если я найду свой компонент на вкладке консоли React, RestaurantSelect ничего не будет найдено:

Пустые результаты поиска компонентов

Но если я ищу Select, он появляется и имеет props и state, которые имеют выбранное значение (в данном случае «Time 4 Thai»):

Результат компонента с реквизитом и состоянием

Однако console.log(this.state) в RestaurantSelect показывает только inputValue, ничего из <Select/>

Есть ли способ получить доступ к props и state компонента более высокого порядка?


reactjs javascript react-select higher-order-components
person David Yeiser    schedule 30.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Обнаружил проблему, в RestaurantSelect функцию handleInputChange необходимо добавить как onChange опору к возвращаемому компоненту. Вот так:

  <AsyncSelect
    className="select-add-user-restaurant"
    cacheOptions
    defaultOptions
    placeholder="Start typing to select restaurant"
    loadOptions={promiseOptions}
    onChange={this.handleInputChange}
  />

newValue - это объект с такой конструкцией:

{
  value: "name",
  label: "Name"
}

Примечание. После активации приведенный выше код выдает ошибку. Я изменил его на это, чтобы передать данные родительскому компоненту:

handleInputChange = (newValue: string) => {
  this.props.setRestaurantSelection(newValue)
  const inputValue = newValue
  this.setState({ inputValue })
  return inputValue
}

Где this.props.setRestaurantSelection происходит от родительского компонента, например:

<RestaurantSelect setRestaurantSelection={this.setRestaurantSelection} />

В родительском компоненте это выглядит так:

constructor() {
  super()

  this.state = {
    restaurantSlug: ''
  }

  this.setRestaurantSelection = this.setRestaurantSelection.bind(this)
}

…

setRestaurantSelection = (value) => {
  this.setState({
    restaurantSlug: value.value
  })
}
person David Yeiser    schedule 30.04.2018