代码之家 › 专栏 › 技术社区 › Shawn Matthews

如何在Redux表单中将prop传递给onChange函数?

redux-form redux ecmascript-6 reactjs javascript

Shawn Matthews · 技术社区 · 7 年前

因此,假设我有以下组件(这是伪代码,但希望能用更短的阅读格式来说明我的问题)。。。

class Example extends React.Component {
  onChange = () => {
    store.dispatch({ type: 'FETCH_VENUE', location: locationValue })
  }

  render() {
    console.log(this.props.id) // "2"
    return (
      <Field id="salesArea" name="orderHeader.salesArea" type="select" onChange={this.onChange}
             component={SelectComponent} />
    )
  }
}

export default Example;

如果容器组件ExampleContainer中有一个道具,它在此处提供一个值。道具id.如何将其传递为locationValue,因此基本上相当于

location: this.props.id

无需创建反模式。

这道具。id使用HOC中的formValueSelector返回salesArea的当前值。

如果我设置了位置,我的代码工作得很好,例如:“2”,但有没有办法将道具传递给此调度?

1 回复 | 直到 7 年前

Shawn Matthews 7 年前

对于任何一个偶然发现这一点的人。我解决了它如下。

我在简单表单组件中添加了以下函数。

onVenueChange = (event, venueId) => {
    console.log(venueId);
    this.props.onVenueChange(venueId)
}

然后我在中这样称呼它<字段/>

call onChange={this.onVenueChange}

在作为mapDispatch一部分的HOC中,我有以下内容。它调度动作。

onVenueChange: venueId => dispatch({type: 'FETCH_EDITABLEORDERS', venueId: venueId })

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

7 月前

Alex · 在轻量级中同时解构和不解构变量

7 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

7 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

7 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前