1

我是 Reactjs 的新手，我正在尝试执行 CRUD 操作。但是我在执行删除事件时遇到了问题。这是我的屏幕的外观：！[在此处输入图像描述][1]

我的代码如下所示：

    var DALHandler=React.createClass({
            getInitialState:function(){
              return{data: {objects:[]}} // variable should be created with array
            },
            DeleteOrganizationFromServer: function(id) { // this is Json Function

                $.ajax({
                    headers: { 'Accept': 'application/json',  
                    'Content-Type': 'application/json'},
                    url: 'URL/'+id,
                    dataType: 'json',
                    type: 'Delete',

                    success: function(data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url='url', status, err.toString());
                    }.bind(this)
                });
            },

            loadOrganizationFromServer: function() {
                $.ajax({
                    headers: { 'Accept': 'application/json',  
                    'Content-Type': 'application/json'},
                    url: 'URL/'+id,
                    dataType: 'json',
                    success: function(data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url='url', status, err.toString());
                    }.bind(this)
                });
            },componentWillMount: function() {
                this.loadOrganizationFromServer();
                //setInterval(this.loadCommentsFromServer, this.props.pollInterval);
            },render: function() {
                return (
                    <div >

                    <OrganizationAPP onOrganizationSubmit={this.handleOrganizationSubmit} />
                    <OrganizationList data= {this.state.data}  />
                    <Organization DeleteOrganization= {this.DeleteOrganizationFromServer} />


                    </div>
                    );
            }
        });

    var OrganizationList=React.createClass({
        render:function(){
            var results = this.props.data;
            var parsed_results = results.objects;
            var organizations = parsed_results.map(function(organization){
                return <Organization  id={organization.id} name={organization.name} description={organization.description}> </Organization>
            });
            return(<div>
                {organizations}
                </div>)
        }
    });

    //var converter = new Showdown.converter();

    var Organization = React.createClass({
        handleDeleteClick: function (e) {
                //alert(this.props.id);
                 var currentId=this.props.id;
                 this.props.DeleteOrganization(); // ERROR CAUSES HERE:


            },

    render: function() {

        return (
            <div className="row">
            <div className="small-2 large-2 columns">{this.props.id} </div>
            <div className="small-4 large-4 columns">{this.props.name} </div>
            <div className="small-4 large-4 columns">{this.props.description}</div>
            <div className="small-2 large-2 columns"> 

            <input type="button" onClick={this.handleDeleteClick} data-order={this.props.id} value="Delete" />  

            </div>


            </div>
            );
    }
});

我知道我犯了一些愚蠢的错误，但我找不到解决这个问题的帮助。请帮我整理一下。

先感谢您。

4

2 回答 2

2

我已经设法解决了 myslef 的问题，但是这个小提琴对我帮助很大：http: //jsfiddle.net/ammit/wBYHY/5/

所以主要是我在 OrganizationList 中添加了一个调用 DeleteOrganizationFromServer 函数的函数，所以现在我的代码如下所示：

var OrganizationHandler=React.createClass({
            getInitialState:function(){
                return{data: {objects:[]}} // variable should be created with array
            },
            DeleteOrganizationFromServer: function(id) {

                $.ajax({
                    headers: { 'Accept': 'application/json',
                    'Content-Type': 'application/json'},
                    url: 'url/'+id,
                    dataType: 'json',
                    type: 'Delete',

                    success: function(data) {
                        this.loadOrganizationFromServer();
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url="url', status, err.toString());
                    }.bind(this)
                });
            },

            loadOrganizationFromServer: function() {
                $.ajax({
                    headers: { 'Accept': 'application/json',
                    'Content-Type': 'application/json'},
                    url: 'url',
                    dataType: 'json',
                    success: function(data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error('url="url', status, err.toString());
                    }.bind(this)
                });
            },
            componentWillMount: function() {
                this.loadOrganizationFromServer();

            },render: function() {
                return (
                    <div >

                    <OrganizationAPP onOrganizationSubmit={this.handleOrganizationSubmit} />
                    <OrganizationList external_DeleteOrganization={this.DeleteOrganizationFromServer} data= {this.state.data}  />

                    </div>
                    );
            }
        });

    var OrganizationList=React.createClass({
        internal_DeleteOrganization: function(id) {
            this.props.external_DeleteOrganization(id);
        },
        render:function(){
            var results = this.props.data;
            var parsed_results = results.objects;
            var that = this; // Not equally that to this was also causing error, 
            var organizations = parsed_results.map(function(organization){
                return <Organization onDeleteOrganization={that.internal_DeleteOrganization} id={organization.id} name={organization.name} description={organization.description} />
            });
            return(<div>
                {organizations}
                </div>)
        }
    });

    var Organization = React.createClass({
        handleDeleteClick: function () {
                this.props.onDeleteOrganization(this.props.id);
            },

    });
于 2014-06-13T23:51:43.867 回答
2

您可以像这样创建组织元素：

<Organization  id={organization.id} 
               name={organization.name} 
               description={organization.description}></Organization>

因此，在 Organization 内部，您将拥有三个道具：id、name 和 description。您尝试this.props.DeleteOrganization()从 Organization 内部调用，这是未定义的，因为它不是您传递给它的三个道具之一。

要使其与 OrganizationList 一起使用，您需要将删除功能向下传递给它：

<OrganizationList data={this.state.data}  onDelete={this.DeleteOrganizationFromServer} />

而在 OrganizationList 的渲染函数中，您可以再次将其传递下去。

<Organization  id={organization.id} 
               name={organization.name} 
               description={organization.description}
               onDelete={this.props.onDelete.bind(null, organization.id}></Organization>

在组织内部：

handleDeleteClick: function(){
    this.props.onDelete()
}
于 2014-06-13T20:49:50.790 回答