reactjs - reactjs中如何从另一个组件刷新一个组件的数据

Question

我是反应 js 并使用一些基本 CRUD 操作创建一个示例应用程序的新手。
我可以显示一个列表，但我不知道是否删除任何记录然后如何刷新数据网格。

这是我的代码：

var DeleteRow = React.createClass({
    rowDelete: function (e) {
        console.log(this.props);
        var isConfirm = confirm("Are you sure want to delete this record?")
        if (isConfirm) {
            $.ajax({
                type: 'POST',
                url: 'Students/DeleteStudent',
                data: { id: this.props.data },
                success: function (data) {
                    // refresh the list data
                },
                error: function (error) {

                }
            });
        }
    },
    render: function () {
        return(            
              <button data={this.props.id} onClick={this.rowDelete} className="btn btn-danger">Delete</button>
         );
    },
});

var SudentList = React.createClass({
    render: function () {
        var RowData = this.props.data.map(function(item){
            return (
              <tr key={item.id}>
                 <td>{item.id}</td>
                 <td>{item.firstMidName}</td>
                 <td>{item.lastName}</td>
                 <td>{item.enrollmentDate}</td>
                 <td>Edit</td>
                 <td><DeleteRow data={item.id}/></td>
             </tr>
            );
          });

        return (
            <table className="table table-bordered table-responsive">
             <thead>
                <tr>
                 <th>Id</th>
                 <th>Fist Name</th>
                 <th>Last Name</th>
                 <th>Enrollment Date</th>
                 <th>Edit</th>
                 <th>Delete</th>
                </tr>
             </thead>
             <tbody>
                 {RowData}
             </tbody>
         </table>            
      );
    }
});

var Gird = React.createClass({
    loadStudentsFromServer: function () {
        $.get(this.props.dataUrl, function (data) {
            if (this.isMounted()) {
                this.setState({
                    items: data
                });
            }
        }.bind(this));
    },
    getInitialState: function () {
        return { items: [] };
    },
    componentDidMount: function () {
        this.loadStudentsFromServer();
    },
    render: function () {

        var addBtnStyle = {
            margin:'10px',           
        }

        return (
             <div>
           <button className="btn btn-primary pull-right" style={addBtnStyle}>Add New</button>               
           <SudentList data={this.state.items} />                                                                    
         </div>
    );
    }
});

ReactDOM.render(
  <Gird dataUrl='/Students/GetAllStudent' />,
  document.getElementById('content')
);

我想在ajax成功时Gird从DeleteRow组件刷新组件的数据，我该怎么做？我在这个网站上遇到了几个问题，但到目前为止还没有运气。

Answer 1

你需要做的是从组件中传递一个函数给DeleteRow组件Grid，这样当删除成功时，你会更新Grid. 尝试这样的事情

var DeleteRow = React.createClass({
    rowDelete: function (e) {
        console.log(this.props);
        var self = this;
        var isConfirm = confirm("Are you sure want to delete this record?")
        if (isConfirm) {
            $.ajax({
                type: 'POST',
                url: 'Students/DeleteStudent',
                data: { id: this.props.data },
                success: function (data) {
                    // refresh the list data
                    self.props.onRowDelete(self.props.data)
                },
                error: function (error) {

                }
            });
        }
    },
    render: function () {
        return(
              <button data={this.props.id} onClick={this.rowDelete} className="btn btn-danger">Delete</button>
         );
    },
});

var SudentList = React.createClass({
    render: function () {
        var self = this;
        var RowData = this.props.data.map(function(item){
            return (
              <tr key={item.id}>
                 <td>{item.id}</td>
                 <td>{item.firstMidName}</td>
                 <td>{item.lastName}</td>
                 <td>{item.enrollmentDate}</td>
                 <td>Edit</td>
                 <td><DeleteRow data={item.id} onRowDelete={self.props.onRowDelete}/></td>
             </tr>
            );
          });

        return (
            <table className="table table-bordered table-responsive">
             <thead>
                <tr>
                 <th>Id</th>
                 <th>Fist Name</th>
                 <th>Last Name</th>
                 <th>Enrollment Date</th>
                 <th>Edit</th>
                 <th>Delete</th>
                </tr>
             </thead>
             <tbody>
                 {RowData}
             </tbody>
         </table>
      );
    }
});

var Gird = React.createClass({
    loadStudentsFromServer: function () {
        $.get(this.props.dataUrl, function (data) {
            if (this.isMounted()) {
                this.setState({
                    items: data
                });
            }
        }.bind(this));
    },
    getInitialState: function () {
        return { items: [] };
    },
    componentDidMount: function () {
        this.loadStudentsFromServer();
    },
    onRowDelete: function(id) {
      var items = this.state.items.filter(function(item, i) {
        return item.id !== id;
      })
      this.setState({items: items})
    },
    render: function () {

        var addBtnStyle = {
            margin:'10px',
        }

        return (
             <div>
           <button className="btn btn-primary pull-right" style={addBtnStyle}>Add New</button>
           <SudentList data={this.state.items} onRowDelete={this.onRowDelete}/>
         </div>
    );
    }
});

这也可能有帮助

Answer 2

我有您的代码的一种解决方案，您可以将函数传递给组件，就像您传递给组件loadStudentsFromServer()一样DeleteRowthis.state.itemsSudentList

你可以改变你的代码，第一个在这里：

<SudentList data={this.state.items} loadStudentsFromServer={this.loadStudentsFromServer}/>   

然后在您的SudentList组件中，您可以添加此功能：

loadStudentsFromServer: function(){
        this.props.loadStudentsFromServer()
    }.bind(this),

并将此更改为将您的功能传递给DeleteRow组件：

<DeleteRow data={item.id} loadStudentsFromServer={this.props.loadStudentsFromServer} />

如果您成功删除数据，只需调用该函数：

success: function (data) {
  // refresh the list data
  this.props.loadStudentsFromServer()
},

这是完整的代码：

var DeleteRow = React.createClass({
    rowDelete: function (e) {
        console.log(this.props);
        var isConfirm = confirm("Are you sure want to delete this record?")
        if (isConfirm) {
            $.ajax({
                type: 'POST',
                url: 'Students/DeleteStudent',
                data: { id: this.props.data },
                success: function (data) {
                    // refresh the list data
                    this.props.loadStudentsFromServer()
                },
                error: function (error) {

                }
            });
        }
    },
    render: function () {
        return(            
              <button data={this.props.id} onClick={this.rowDelete} className="btn btn-danger">Delete</button>
         );
    },
});

var SudentList = React.createClass({
    loadStudentsFromServer: function(){
        this.props.loadStudentsFromServer()
    }.bind(this),
    render: function () {
        var RowData = this.props.data.map(function(item){
            return (
              <tr key={item.id}>
                 <td>{item.id}</td>
                 <td>{item.firstMidName}</td>
                 <td>{item.lastName}</td>
                 <td>{item.enrollmentDate}</td>
                 <td>Edit</td>
                 <td><DeleteRow data={item.id} loadStudentsFromServer={this.props.loadStudentsFromServer} /></td>
             </tr>
            );
          });

        return (
            <table className="table table-bordered table-responsive">
             <thead>
                <tr>
                 <th>Id</th>
                 <th>Fist Name</th>
                 <th>Last Name</th>
                 <th>Enrollment Date</th>
                 <th>Edit</th>
                 <th>Delete</th>
                </tr>
             </thead>
             <tbody>
                 {RowData}
             </tbody>
         </table>            
      );
    }
});

var Gird = React.createClass({
    loadStudentsFromServer: function () {
        $.get(this.props.dataUrl, function (data) {
            if (this.isMounted()) {
                this.setState({
                    items: data
                });
            }
        }.bind(this));
    },
    getInitialState: function () {
        return { items: [] };
    },
    componentDidMount: function () {
        this.loadStudentsFromServer();
    },
    render: function () {

        var addBtnStyle = {
            margin:'10px',           
        }

        return (
             <div>
           <button className="btn btn-primary pull-right" style={addBtnStyle}>Add New</button>               
           <SudentList data={this.state.items} loadStudentsFromServer={this.loadStudentsFromServer}/>                                                                    
         </div>
    );
    }
});

ReactDOM.render(
  <Gird dataUrl='/Students/GetAllStudent' />,
  document.getElementById('content')
);

希望对你有帮助，如果有其他错误，你可以评论，谢谢:)

注意：此代码在删除一些数据后从服务器重新获取您的数据