如何正确地将 React onClick 事件与 Redux 绑定？答案

【问题标题】：How to correctly bind React onClick event with Redux?如何正确地将 React onClick 事件与 Redux 绑定？
【发布时间】：2017-07-16 07:18:48
【问题描述】：

基本上没有迹象表明该事件被绑定在某个地方并且没有触发。这是组件

class AgendaPointsList extends React.Component {
  constructor(props) {
    super(props);
    this.onAgendaPointClick = this.props.onAgendaPointClick.bind(this);
  }

  render() {
    let items = this.props.agenda_points.map((a, i) => {
      return <AgendaPoint key={i} agenda_point={a} index={i} onClick={this.onAgendaPointClick} />
    })

    console.log(this.props)

    return (
      <table>
        <tbody>
          {items}
        </tbody>
      </table>
    ); 
  }
}

console.log(this.props) 输出：

Object
item_point: Object
item_points: Array[4]
onItemPointClick: onItemPointClick(id)
onModalCloseClick: onModalCloseClick(id)
store: Object
storeSubscription: Subscription
__proto__: Object

这里是 redux 组件：

const OPEN_AGENDA_POINT = 'meeting/OPEN_AGENDA_POINT'
const CLOSE_AGENDA_POINT = 'meeting/CLOSE_AGENDA_POINT'

const initialState = {
  modal_is_open: false,
  point_id: 0,
  point_data: {}
}

const openAgendaPoint = function (id) {
  return {
    type: OPEN_AGENDA_POINT,
    id: id
  }
}

const closeAgendaPoint = function (id) {
  return {
    type: CLOSE_AGENDA_POINT,
    id: id
  }
}

const agendaPointsReducer = function (state = initialState, action) {
  switch (action.type) {
    case OPEN_AGENDA_POINT: {
      state.modal_is_open = true,
      point_id = action.id
    }
    case CLOSE_AGENDA_POINT: {
      state.modal_is_open = false
    }
    default:
      return state
  }
}


const agendaPointsUiStateProps = (state) => {
  return {
    agenda_point: state.point_data
  }
}

const agendaPointsUiActions = (dispatch) => {
  return {
    onAgendaPointClick: (id) => {
      console.log(id)
      dispatch(openAgendaPoint(id))
    },
    onModalCloseClick: (id) => {
      dispatch(closeAgendaPoint(id))
    }
  }
}

const store = Redux.createStore(
  agendaPointsReducer, 
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

// Usage:
const AgendaPointsList = connectWithStore(
  store, 
  AgendaPointsList, 
  agendaPointsUiStateProps, 
  agendaPointsUiActions
)

这是子组件：

class AgendaPoint extends React.Component {
  render() {
    return (
      <tr>
        <td>{ this.props.index + 1 }</td>
        <td>{ this.props.agenda_point.title}</td>
        <td>6</td>
        <td>{ this.props.agenda_point.agenda_time } min</td>
      </tr>
    ); 
  }
}

我尝试了多种绑定事件的方法：

onClick={this.props.onAgendaPointClick.bind(a.id, this)
onClick={this.props.onAgendaPointClick(a.id, this).bind(this)
onClick={() => this.props.onAgendaPointClick(a.id))

似乎不起作用。

使用this 进行 reac-redux 连接包装器以传入存储。这是在 Ruby on Rails Sprockets beta4 上运行的。

这样做的正确方法是什么？

【问题讨论】：

正确的绑定是onClick={this.props.onItemClick.bind(this, a.id)
这应该可以工作：onClick={() => this.props.onItemClick(a.id))} 在这种情况下，将它绑定到 this 是没有用的。当您使用这种方法时，您会遇到什么样的错误？
@cubbuk 它可以在 React 调试工具现在识别为 onClick="bound onItemClick()" 的范围内工作。但没有任何反应，并且事件本身的控制台日志没有任何作用
@stevenmahieu 绝对没有，没有约束，没有事件，没有任何东西。只需在 React 开发工具中使用“onClick=onClick()”即可。
@Aurimas 是 this.props 中存在的函数 onItemClick 吗？

标签： reactjs ecmascript-6 redux jsx sprockets

【解决方案1】：

尝试在您的 ItemList 构造函数中绑定事件：

  constructor(props) {
    super(props);
    this.onItemClick = this.onItemClick.bind(this);
  }

然后在您的 ItemList 渲染函数中...

  let items = this.props.agenda_points.map((a, i) => {
    return <Item key={i} agenda_point={a} index={i} onClick={this.props.onItemClick} />
  })

这假定 onItemClick 函数在 ItemList 父级中定义，并作为道具传入。

【讨论】：

react dev 工具显示事件是绑定的（就像我尝试过的其他一些情况一样），但它实际上并没有在实际的 DOM 上注册。有什么问题？谢谢
我注意到在 ItemList 渲染函数中，您正在渲染 Item，但您的子组件实际上被称为 ItemPoint？也许这是问题的一部分？编辑：刚刚意识到@jpdelatorre 已经以另一种方式提出了这个问题。
不，我之前改过代码里的名字，现在改成真实的代码了。还有什么想法吗？
onAgendaPointClick 函数定义在哪里？这个事件不应该在AgendaPointsList中定义吗？您的AgendaPoint 组件中似乎也缺少onClick={this.props.onAgendaPointClick}。

【解决方案2】：

您希望点击出现在您的标签上。通过以下代码更改，您的事件将被触发：

class AgendaPoint extends React.Component {   render() {
    return (
      <tr onClick={this.props.onClick}>
        <td>{ this.props.index + 1 }</td>
        <td>{ this.props.agenda_point.title}</td>
        <td>6</td>
        <td>{ this.props.agenda_point.agenda_time } min</td>
      </tr>
    );    } }

【讨论】：