单击reactjs时如何重新加载表格

Posted

技术标签:

【中文标题】单击reactjs时如何重新加载表格【英文标题】:How to reloads the table when clicked reactjs 【发布时间】:2017-10-22 20:02:15 【问题描述】:

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

我的 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);

    )

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

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:它也在同一页中..我不知道我该怎么称呼它的原因

【问题讨论】:

也添加你的 reactjs 代码 我试图做 ajax 但我不知道怎么做 :( 【参考方案1】:

在您的ajax 呼叫中,在您的呼叫成功后获取响应并在收到新响应的情况下呼叫setState

现在反应将re-render 并且您的组件将使用来自 ajax 调用的新数据进行更新。

无需致电history.go(0)

我假设有一个TableComponent 呈现表结构。 TableComponentTest 组件接收data 作为prop

一旦通过 ajax 调用获得新数据,该数据就会传递给 TableComponent 并且 TableComponent 会重新呈现自身。

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

以下面的代码 sn-p 为例。

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>

【讨论】:

我很困惑 this.countLines(); 是做什么的做什么? @P.Macs 上面的代码 sn-p 将不会运行,因为它取决于您的获取请求,并且 TableComponent 尚未添加。我刚刚给你提供了一个例子。 我尝试更新我的问题,希望对您有所帮助.. 我也尝试添加您建议的答案,但最终还是做了同样的事情 :( 我不知道我在做什么.. 抱歉 在组件中获取新数据后是否调用 setState? .then(function (result) this.setState( jsonReturnedValue: results ); )

以上是关于单击reactjs时如何重新加载表格的主要内容,如果未能解决你的问题,请参考以下文章

如何在reactjs中单击删除表格行?

ReactJS/Apollo/Graphql:使用 @skip 阻止 data.refetch 直到单击 onSubmit 但重新获取仍然可用

reactjs preventDefault() 不会阻止表单提交时页面重新加载

ReactJs:如何在启动时选择性地加载反应功能组件?

在 ReactJS 中单击按钮时通过 id 动态加载数据

在 ReactJs 中单击按钮时加载新组件?