如何访问 props 和 react-select HOC 的状态

Question

我正在使用 react-select v2.0 创建一个包含预定义项目的 select 下拉菜单。我将它连接到 returns 带有文本搜索选项的 Parse 查询。

我的问题是我不知道如何将 selected 值传递给父组件。

该组件名为 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 属性与键入的文本相匹配，但是当从下拉列表中输入 select 值时，它会消失（即来自 <input value="Typed name" /> 到 <input value />。一个单独的 <span> 元素与标签的值一起出现，但我不想从 DOM 中获取它，这似乎不是预期的方法。

如果我在 React 控制台选项卡中搜索我的组件，RestaurantSelect 没有找到：

但是，如果我搜索 Select，它会出现并且 props 和 state 具有 selected 值（"Time 4 Thai" 在这个案例):

但是，console.log(this.state) 在 RestaurantSelect 中仅显示 inputValue，<Select/>

中没有任何内容

有没有办法访问高阶组件的props和state？

Answer 1

发现问题，在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
  })
}

如何访问 props 和 react-select HOC 的状态

How to access props and state of react-select HOC

javascript

reactjs

react-select

higher-order-components