javascript - 如何在 React Redux 中从组件获取事件到容器

Question

我是 Redux 新手。我非常轻松地处理了基本的 Facebook Flux 架构，并用它制作了一些不错的应用程序。但我非常努力地让非常简单的 Redux 应用程序运行起来。我主要关心的是容器以及它们从组件捕获事件的方式。

我有这个非常简单的应用程序:

容器

import { connect } from 'react-redux'
import {changevalue} from 'actions'
import App from 'components/App'


const mapStateToProps = (state) => {
  return {
    selector:state.value
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onClick: (e) => {
      console.log(e)
      dispatch(changeValue())
    }
  }
}

const AppContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

export default AppContainer;

组件

import React, {Component} from 'react'
import Selector from 'components/Selector'
import Displayer from 'components/Displayer'


const App = (selector, onClick) => (
  <div>
    <Selector onClick={(e) => onClick}/>
    <Displayer />
  </div>
)

export default App;

子组件

import React, {Component} from 'react'


const Selector = ({onClick}) => (
  <div onClick={onClick}>click me</div>
)

export default Selector;

onClick 事件未到达容器的 mapDispatchToProps。我觉得如果我得到了这份工作，我就得到了启示，最终得到了 Redux 的东西! ;)

有人可以帮我得到这个吗？ (Redux 文档完全没有帮助......)

Answer 1

问题出在应用程序组件中。在 Selector 组件的 onClick 属性中，您传递的函数返回函数的定义，而不是结果。

const App = (selector, onClick) => (
  <div>
    <Selector onClick={(e) => onClick}/> // here is the problem
    <Displayer />
  </div>
)

你应该简单地这样做:

const App = (selector, onClick) => (
  <div>
    <Selector onClick={(e) => onClick(e)}/>
    <Displayer />
  </div>
)

或者更简单:

const App = (selector, onClick) => (
  <div>
    <Selector onClick={onClick}/>
    <Displayer />
  </div>
)