如何在react js中从另一个组件刷新一个组件的数据

您需要做的是将函数传递给 DeleteRow 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>
    );
    }
});

This 也可能有帮助

我有一个你的代码解决方案,你可以传递函数 loadStudentsFromServer() 到组件 DeleteRow 就像你传球一样 this.state.items 到组件 SudentList

您可以更改代码,第一个在这里:

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

SudentList公司 您可以添加此功能的组件:

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

删除行 组件:

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

希望能对您有所帮助,如果有其他错误,您可以发表评论,谢谢:)