使用类时将调度映射到props

Question

我正在尝试在单击元素时调度redux操作。以下是我目前设置的方式

动作

export function removeItem(idx) {
  // remove the item at idx

  return {
    type: "DESTROY_ITEM",
    payload: {idx: idx}
  }
}

容器组件

import ItemUi from '../ui/Item';
import { connect } from 'react-redux'
import { removeItem } from '../../actions'

const mapDispatchToProps = dispatch => {
  return({
    destroyItem: (index) => {
      dispatch(
        removeItem(index)
      )
    }
  })
}


export default connect(null, mapDispatchToProps)(ItemUi)

ui组件

import React, { Component, PropTypes } from 'react';

class Item extends Component {

  // ... methods removed for length

  render() {

    return (
      <div>
        <span 
          className="btn btn-primary btn-xs glyphicon glyphicon-trash"
          onClick={() => {this.props.destroyItem(this.props.index)}}></span>
      </div>
    )
  }
}

DestroyItem.propTypes = {
    onRemoveItem: PropTypes.func
}

export default Item

顶级组件

import React, { Component } from 'react';
import Item from './Item'

class App extends Component {
    render() {
        return(
            <div className="container">
              <NewItem/>
              <ClearAll/>
              <div className="panel-group" id="accordion">
                {this.props.item.map(this.eachItem)} // <-- renders each item
              </div>
            </div>
        )
    }
}

export default App;

当用户点击Item ui组件中显示的span元素时，我想触发传递到组件destroyItem道具中的index操作。相反，我得到了错误

TypeError: _this2.props.destroyItem is not a function

请您就我应该如何做到这一点提供一些指导？如果我能提供任何其他有用的背景，请告诉我。

Answer 1

尝试：

$(document).ready(function () {
    $('#addPropriedade').submit(function () {        
        var dados = new FormData($('#addPropriedade').get(0));

        $('#savePost').click(function () {
            dados.status = 1;
            console.log(dados.status);
        });
        $('#save').click(function () {
            dados.status = 0;
            console.log(dados.status);
        });


        $("#errorMessage").hide();

        var loading = $("#div_loading");
        $(document).ajaxStart(function () {
            loading.show();
        });
        $(document).ajaxStop(function () {
            loading.hide();
        });

        $.ajax({
            accepts: { json: 'application/json' },
            dataType: 'json',
            type: "POST",
            url: "/Propriedade/addAjax",
            data: dados,
            processData: false,
            contentType: false,
            success: function (data) {
                var status = data["status"];
                var msg = data["msg"];
                if (status === "1") {
                    $('#addPropriedade').trigger("reset");
                    $("#errorMessage").html(msg);
                    $("#errorMessage").prop("class", "alert-success");
                    //window.location.replace("/Empresa/view");                    
                } else {
                    $("#errorMessage").html(msg);
                    $("#errorMessage").prop("class", "alert-danger");
                }
                $("#errorMessage").show()
            },
            error: function (xhr, status) {
                $("#errorMessage").html("Erro tentando cadastrar");
                $("#errorMessage").prop("class", "alert-danger");
                $("#errorMessage").show()
            }
        });

        return false;
    });
});