javascript-将调度传递给onClick事件Redux

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-将调度传递给onClick事件Redux，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2608字，纯文字阅读大概需要4分钟。

内容图文

我正在研究我的第一个react / redux应用程序,在将调度操作映射到组件中的onClick事件时遇到了很多麻烦.

我尝试了几种尝试将onClick Event绑定到调度的变体,但是我总是以以下两种情况中的任何一个结束：

ReferenceError：未定义onMovieClick

或者,当我最终正确绑定一个函数时,我将得到一个与调度有关的错误,该错误未定义.

我的目标
我正在尝试从商店功能实现过滤器(删除)

actions / movieActions.js

import * as actionTypes from './actionTypes'

export const createMovie = (movie) => {
  return {
    type: actionTypes.CREATE_MOVIE,
    movie
  }
};

export const deleteMovie = (id) => {
  console.log('action triggered. movie index:' + id)
  return {
    type: actionTypes.DELETE_MOVIE,
    id
  }
}

reducers / movieReducers.js

export default (state = [], action) => {
  switch (action.type){
    case 'CREATE_MOVIE':
      return [
        ...state,
        Object.assign({}, action.movie)
      ];
    case 'DELETE_MOVIE':
      return [
        state.filter(({ id }) => id  !== action.id)
      ]
    default:
          return state;
  }
};

组件/MovieList.js

import React from 'react'
import Slider from 'react-slick'
import { dispatch, connect } from 'react-redux'
import {Icon} from 'react-fa'
import { deleteMovie } from '../../actions/movieActions'

import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
import './MovieList.scss'

class MovieList extends React.Component{
  constructor(props){
    super (props)
  }

  handleClick(id) {
    dispatch(deleteMovie(id))
  }

  onMovieClick(id){
   dispatch.deleteMovie(id)
  }

  render () {
    // Settings for slick-carousel
    let settings = {
      infinite: true,
      speed: 500
    }

    return (
      <div className='col-lg-12'>
        {this.props.movies.map((b, i) =>
          <div key={i} className="col-lg-2">
            <Slider {...settings}>
              {b.images.map((b, z) =>
                <div className="img-wrapper">
                  <Icon name="trash" className="trash-icon" onClick={() =>
                    console.log(this.props.movies[i].id),
                    onMovieClick(this.props.movies[i].id)
                  }/>
                  <img className="img-responsive" key={z} src={b.base64}></img>
                </div>
              )}
            </Slider>
            <div className="text-left info">
              <h2>{b.title}</h2>
              <p>{b.genre}</p>
            </div>
          </div>
        )}
      </div>
    )
  }
}

// map state from store to props

const mapStateToProps = (state) => {
  return {
    movies: state.movies
  }
};

// Map actions to props
const mapDispatchToProps = (dispatch) => {
  return {
    onMovieClick: (id) => {
      dispatch(deleteMovie(id))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MovieList)

如果有人有空的话,希望能得到一些建议.

解决方法:

由于您是通过connect传递onMovieClick的,因此您实际上可以从MovieList组件道具中调用它.首先,我将在MovieList组件中删除onMovieClick方法定义,然后在Icon的onclick处理程序中使用this.props.onMovieClick,如下所示：

<Icon name="trash" className="trash-icon" onClick={() =>
  console.log(this.props.movies[i].id),
  this.props.onMovieClick(this.props.movies[i].id)
}/>

内容总结

以上是互联网集市为您收集整理的javascript-将调度传递给onClick事件Redux全部内容，希望文章能够帮你解决javascript-将调度传递给onClick事件Redux所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端