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 on Rails Sprockets beta4上运行。

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

Answer 1

您希望点击符号在您的标记上。通过以下代码更改，您将触发事件：

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

Answer 2

尝试在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 parent中定义，并作为prop传入。

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

2 个答案: