单击reactjs时如何重新加载表格 [英] How to reloads the table when clicked reactjs

查看：43
本文介绍了单击reactjs时如何重新加载表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想知道如何只重新加载表格，而不是整个页面的反应.我试过使用 history.go(0); 但是，它会重新加载整个页面，请检查如何重新加载它，如果我打算使用 forceUpdate，根据研究，你应该避免使用它.我正在尝试做一个 AJAX，但我不知道该把它放在哪里......它与 php 的方式不同..

我的 onclick 代码

 handleSubmit( 姓名、地址、部门){常量拉曼 = {'Employee_Name':姓名，'地址':地址，'部门':部门}return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail?', {方法:'POST'，标题:{'内容类型':'应用程序/json'},正文:JSON.stringify(拉曼)}).then(功能(响应){控制台日志(响应)返回 response.json();}).then(函数(结果){历史.go(0);}).catch(函数(错误){控制台日志(错误)；})}

这是onclick按钮加上表格本身的代码

render() {const isEnabled = this.canBeSubmitted();让 {jsonReturnedValue} = this.state;返回(<div><div className="容器"><h1>员工名单</h1><button className='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee">添加员工</button><table className="table table-bordered" id="result"><tr><th>ID</th><th>姓名</th><th>地址</th><th>更新</th><th>删除</th></tr>{jsonReturnedValue.map((d,i) => this.renderItem(d,i))}</tbody>

{/*更新*/}<div className="modalfade" id="UpdateEmployee" role="dialog"><div className="modal-dialog"><div className="modal-content"><div className="modal-header"><button type="button" className="close" data-dismiss="modal">&times;</button><h4 className="modal-title">添加员工</h4>

<表格><div className="容器"><div className="modal-body"><表格><tr><td>姓名</td><td><输入类型="文本"ref="员工姓名"onChange={(e) =>this.handleChange(e, "Employee_Name")}必需的/></td></tr><tr><td>地址</td><td><输入类型="文本"参考=地址"onChange={(e) =>this.handleChange(e, "地址")}必需的/></td></tr><tr><td>部门</td><td><输入类型="文本"onChange={(e) =>this.handleChange(e, "部门")}必需的/></td></tr></tbody>

<div className="modal-footer"><input type="button" className="btn btn-info"disabled={!isEnabled}onClick = { this.handleSubmit.bind(这个，这个.state.Employee_Name，this.state.Address,这个.州.部门)}值 =添加员工"数据关闭=模态"/><button type="button" className="btn btn-default" data-dismiss="modal" >关闭</button>

</表单>

PS:它也在同一页面中..我不知道我该怎么称呼它的原因

解决方案

在您的 ajax 调用中，调用成功后获取响应并使用新响应调用 setState收到.

现在 react 将重新渲染，并且您的组件将使用来自 ajax 调用的新数据进行更新.

无需调用history.go(0).

我假设有一个 TableComponent 呈现表格结构.TableComponent 从 Test 组件接收 data 作为 prop.

只要通过 ajax 调用有新数据可用，该数据就会传递给 TableComponent 并且 TableComponent 重新渲染自身.

在这种情况下不会发生整个页面的重新渲染，只有在状态发生变化的地方才会发生变化.

以下面的代码片段为例.

class Test extends React.Component {构造函数(){极好的();this.state = {数据:[]};}handleChange =(事件，名称)=>{//这里设置状态}处理提交(名称，地址，部门){常量拉曼 = {'Employee_Name':姓名，'地址':地址，'部门':部门}return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail?', {方法:'POST'，标题:{'内容类型':'应用程序/json'},正文:JSON.stringify(拉曼)}).then(功能(响应){控制台日志(响应)返回 response.json();}).then(函数(结果){this.setState({data:result});//<--------//一旦你调用 setState rerender 就会发生}).catch(函数(错误){控制台日志(错误)；})}使成为() {返回 (<div><表格><div className="容器"><div className="modal-body"><表格><tr><td>姓名</td><td><输入类型="文本"ref="员工姓名"onChange={(e) =>this.handleChange(e, "Employee_Name")}必需的/></td></tr><tr><td>地址</td><td><输入类型="文本"参考=地址"onChange={(e) =>this.handleChange(e, "地址")}必需的/></td></tr><tr><td>部门</td><td><输入类型="文本"onChange={(e) =>this.handleChange(e, "部门")}必需的/></td></tr></tbody>

<div className="modal-footer"><input type="button" className="btn btn-info" disabled={!isEnabled}onClick = { this.handleSubmit.bind(这个，这个.state.Employee_Name，this.state.Address,这个.州.部门)}值 =添加员工"数据关闭=模态"/><button type="button" className="btn btn-default" data-dismiss="modal" >关闭</button>

</表单>//你的表格组件或 jsx 放在这里//根据状态渲染你的表格——数据<TableComponent data={this.state.data}/>

);}}ReactDOM.render( <Test/> ,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="root"></div>

I was wondering how will I reload only the table, not the whole page on reacts. I've tried using history.go(0); however, it reloads the whole page please check how can I reload it, if I was going to use forceUpdate, based on research you should avoid using it. Im trying do an AJAX but i dont know what to put where to put it... it is way different than php..

my code for the onclick

 handleSubmit( name, address,department){

 const laman = {
      'Employee_Name': name,
      'Address': address,
      'Department': department
    }
    return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail?', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(laman)
    })
    .then(function(response) {
      console.log(response)
      return response.json();
    })
    .then(function (result) {
      history.go(0);
    })
    .catch(function(error) {
      console.log(error);

    })
}

this is the code for the onclick button plus the table itself

render() {
     const isEnabled = this.canBeSubmitted();
    let {jsonReturnedValue} = this.state;
  return(
    <div>
        <div className="container">   
          <h1> Listof Employees </h1>
            <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
             <table className= "table table-bordered" id="result"> 
                <tbody>
                 <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Address</th>
                      <th>Update</th>
                      <th>Delete</th>
                 </tr>
                    {jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
                </tbody>
            </table>
          </div>

      {/*Updating*/}

    <div className="modal fade" id="UpdateEmployee" role="dialog">
           <div className="modal-dialog">
             <div className="modal-content">
                <div className="modal-header">
                   <button type="button" className="close" data-dismiss="modal">&times;</button>
                  <h4 className="modal-title">ADD  Employee</h4>
            </div>
<form>

        <div className="container">
          <div className="modal-body">
              <table> 
              <tbody>
              <tr>
              <td>Name</td>
              <td>
              <input type="text"
                    ref="Employee_Name"
                    onChange={(e) => this.handleChange(e, "Employee_Name")}
                    required
                    /> 
              </td>
              </tr>
              <tr>
              <td>Address</td>
              <td>
               <input type="text"
                     ref="Address"
                    onChange={(e) => this.handleChange(e, "Address")}
                    required
                     />
              </td>
              </tr>
              <tr>
              <td>Department</td>
              <td>
               <input type="text"

                      onChange={(e) => this.handleChange(e, "Department")}
                      required
              /> 
              </td>
              </tr>
              </tbody>
              </table>

          </div>
          </div>
          <div className="modal-footer">
            <input type="button" className="btn btn-info"disabled={!isEnabled} 
                    onClick = { this.handleSubmit.bind(
                                this, this.state.Employee_Name,
                                this.state.Address,
                                this.state.Department)
                                 }
                               value =" Add Employee"
                               data-dismiss="modal"/>
            <button type="button" className="btn btn-default" data-dismiss="modal" >Close</button>
          </div>

            </form>

PS: IT IS ALSO IN THE SAME PAGE.. the reason i dont know how will I call it

解决方案

In your ajax call, after your call is successful get the response and call setState with new response received.

Now react will re-render and your component will be updated with new data from ajax call.

There is no need to call history.go(0).

I have assumed that there is a TableComponent which renders the table structure. TableComponent receives data as prop from Test component.

As soon as new data available via ajax call, that data is passed to TableComponent and TableComponent re-renders itself.

Whole page re-rendering will not occur in this case only changes occur where states were changed.

Check the below code snippet as an example.

class Test extends React.Component {

   constructor(){
     super();
     this.state = {
        data:[]
     };
   }
   
   handleChange = (event, name) => {
    // set state here
   }
  
 handleSubmit( name, address,department) {

 const laman = {
      'Employee_Name': name,
      'Address': address,
      'Department': department
    }
    return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail?', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(laman)
    })
    .then(function(response) {
      console.log(response)
      return response.json();
    })
    .then(function (result) {
      this.setState({data:result}); // <--------
      // as soon as you will call setState rerender will occur
  
    })
    .catch(function(error) {
      console.log(error);

    })
}

  render() {
    return ( 
    <div>
           <form>
<div className="container">
      <div className="modal-body">
          <table> 
          <tbody>
          <tr>
          <td>Name</td>
          <td>
          <input type="text"
                ref="Employee_Name"
                onChange={(e) => this.handleChange(e, "Employee_Name")}
                required
                /> 
          </td>
          </tr>
          <tr>
          <td>Address</td>
          <td>
           <input type="text"
                 ref="Address"
                onChange={(e) => this.handleChange(e, "Address")}
                required
                 />
          </td>
          </tr>
          <tr>
          <td>Department</td>
          <td>
           <input type="text"

                  onChange={(e) => this.handleChange(e, "Department")}
                  required
          /> 
          </td>
          </tr>
          </tbody>
          </table>

      </div>
      </div>
      <div className="modal-footer">
        <input type="button" className="btn btn-info" disabled={!isEnabled} 
           onClick = { this.handleSubmit.bind(
                            this, this.state.Employee_Name,
                            this.state.Address,
                            this.state.Department)
                      }
            value =" Add Employee"
            data-dismiss="modal"/>
        <button type="button" className="btn btn-default" data-dismiss="modal" >Close</button>
      </div>

        </form>
        
       // your table component or jsx goes here

        // render your table based on state -- data
        <TableComponent data={this.state.data} />
    </div>
    );
  }
}

ReactDOM.render( <Test /> ,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

这篇关于单击reactjs时如何重新加载表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆