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组件中声明的refs。这具有直观感;在connect第一次使用mapDispatchToProps解析并导出之后，AddProduct才真正存在。

那么如何访问输入值？我是否错误地设计了这个？

Answer 1

我认为你正在错误地构建这个，你的函数会将dispatch注入其中，所以你需要传递的vars不是上下文的一部分，如果它声明了，你应该做类似的事情：

<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

通常refs仅在您出于某些特殊原因需要访问DOM时使用。使用道具和事件。类似的东西：

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

// snip

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

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

2 个答案: