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

This也可能有帮助

Answer 2

您设置状态，React自行刷新数据。这是React的神奇之处，它是声明性的。

通过从Gird调用setState（objectOfValuesToSet）来设置状态。你传递一个对象。顶级键将被解释为变量名称，并将其值合并到状态中。这将导致受影响的组件刷新。

以下是设置状态的示例...

var newName = { name: "Jasmyn" }
setState(newName)

Answer 3

我有一个代码解决方案，您可以将函数<input type="number" name="item1" id="item1"> <hr /> <div id="item1box"> </div> $('#item1').on('change',function(){ $('#item1box').html(''); var val = $(this).val(); for (var i = 0; i < parseInt(val); i++){ $('#item1box').prepend('<input type="text"><br />'); } });传递给组件loadStudentsFromServer()，就像将DeleteRow传递给组件this.state.items

一样

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

SudentList

然后在您的<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()
},

希望它能为您提供帮助，如果有其他错误，您可以发表评论，谢谢：）

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

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

3 个答案: