mapDispatchToProps 中是否可以访问组件引用？

Question

我有一个简单的 React 组件，它有两个输入并分派一个操作以使用输入值将项目添加到目录中。

# components/addProduct.jsx

import React from 'react'
import { connect } from 'react-redux'

const AddProduct = ({
  onClick
}) => {
  let title, price

  return (
    <form
      onSubmit= { (e) => {
        e.preventDefault()
      }}
    >
      Title: <input ref={ node => {title = node;}} type="text"/><br />
      Price: <input ref={ node => {price = node;}} type="text"/><br />
      <button onClick={onClick}>Create New Product</button>
    </form>
  )
}

function mapDispatchToProps(dispatch) {
  return {
    onClick: () => {
      console.log("Firing on click for button")
      console.log(this)               # => mapToPropsProxy
      console.log(AddProduct.refs)    # => undefined

      dispatch({                      # This will be a call to addProduct(title, price) later
        type: "ADD_PRODUCT",
        title: this.refs.title.value, # ???
        price: this.refs.price.value
      })
    }
  }
}
export default connect(null, mapDispatchToProps)(AddProduct)

我无法访问我在 AddProduct 组件中声明的引用。这很直观； AddProduct 直到connect 第一次使用mapDispatchToProps 解析并被导出时才真正存在。

那么如何访问输入值？我的架构是否不正确？

Answer 1

我认为您的架构设计不正确，您的函数将被调度注入其中，因此您需要传递的变量不是上下文的一部分，如果它是这样声明的，您应该执行以下操作：

<button onClick={() => {this.props.onClick(this.refs.title.value, this.refs.price.value) }}>Create New Product</button>

和连接：

function mapDispatchToProps(dispatch) {
  return {
    onClick: (title, value) => {
      dispatch({                      # This will be a call to addProduct(title, price) later
        type: "ADD_PRODUCT",
        title,
        price
      })
    }
  }
}

Answer 2

通常，只有在您出于某些特殊原因需要访问 DOM 时才使用 refs。使用道具和事件。比如：

<input value={title} onChange={({target:{value}}) => onTitleChanged(value)}/>

// snip

const mapDispatchToProps = dispatch => ({
    onTitleChanged: newTitle => dispatch({type: 'SOME_ACTION', value: newTitle})
})