如何正确绑定 React onClick 事件与 Redux？

Question

基本上没有迹象表明该事件已绑定到某处且未触发。这是组件

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 上的 Rails Sprockets beta4。

正确的做法是什么？

Answer 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 父项中定义，并且作为 prop 传入。

Answer 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>
    );    } }

如何正确绑定 React onClick 事件与 Redux？

How to correctly bind React onClick event with Redux?

reactjs

ecmascript-6

redux

jsx

sprockets