如何訪問道具和反應選擇HOC的狀態

Question

我正在使用react-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

如果檢查組件，則可以看到輸入value屬性與鍵入的文本匹配，但是當從下拉列表中選擇一個值時，該值就會消失（即從<input value="Typed name" />變為<input value /> 。）單獨的<span>元素與標簽的值一起出現，但是我不想從DOM中獲取它，這似乎不是預期的方法。

如果我在React控制台選項卡中搜索我的組件，則RestaurantSelect找不到任何內容：

但是，如果我搜索“選擇”，它將顯示並具有具有選定值的props和state （在這種情況下為“ Time 4 Thai”）：

但是，RestaurantSelect中的console.log(this.state)僅顯示inputValue ， <Select/>沒有任何內容

有沒有辦法訪問高階組件的props和state ？

Answer 1

發現了問題，在RestaurantSelect ，需要將handleInputChange函數作為onChange handleInputChange 添加到返回的組件 。 像這樣：

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