如何访问道具和反应选择HOC的状态

Question

I'm using react-select v2.0 to create a select dropdown with pre-defined items. I have it connected to a Parse query that returns the options with a text search.

My issue is I cannot figure out how to pass the selected value up to the parent component.

The component is named RestaurantSelect and looks like this (abridged):

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}
      />
    )
  }
}

The parent component that calls RestaurantSelect looks like this:

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

If I inspect the component I can see the input value attribute match the typed text, but when a value is selected from the dropdown it disappears (ie goes from <input value="Typed name" /> to <input value /> . A separate <span> element appears with the value of the label, but I don't want to have to grab that from the DOM, that doesn't seem to be the intended method.

If I search the React console tab for my component, RestaurantSelect nothing is found:

But, if I search for Select, it appears and has props and state that have the selected value ("Time 4 Thai" in this case):

However, console.log(this.state) in RestaurantSelect shows only the inputValue , nothing from <Select/>

Is there a way to access the props and state of the higher order component?

Answer 1

Found the problem, in RestaurantSelect the handleInputChange function needs to be added as the onChange prop to the returned component . Like so:

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

newValue is an object with this construction:

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

Note: Once activated, the code above throws an error. I changed it to this to pass the data up to the parent component:

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

Where this.props.setRestaurantSelection comes from the parent component like so:

<RestaurantSelect setRestaurantSelection={this.setRestaurantSelection} />

And looks like this in the parent component:

constructor() {
  super()

  this.state = {
    restaurantSlug: ''
  }

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

…

setRestaurantSelection = (value) => {
  this.setState({
    restaurantSlug: value.value
  })
}