クリックしてテーブルをリロードする方法reactjs

Question

私はどのようにテーブルをリロードするのだろうかと思っていました。私はhistory.go(0);を使用しようとしましたが、ページ全体をリロードして、リロードする方法を確認してください。もし、私がforceUpdateを使うつもりなら、それを使わないでください。イムAJAXを行うしようが、私はそれを置く場所を置くために何を知らないが...これはonclickのためのコードである

私のコードの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); 

    }) 
} 

のために... PHP以外の方法異なっていますボタンに加えて、テーブル自体

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は、同じページにもあり..私はあなたの呼び出しが大成功した後、私は、あなたのajax呼び出しで

Answer 1

それを呼び出す方法を知ってはいけない理由sfulはレスポンスを得て、setStateに新しいレスポンスを受け取りました。

今すぐ反応しますre-renderあなたのコンポーネントはajax呼び出しからの新しいデータで更新されます。

history.go(0)に電話する必要はありません。

私はテーブル構造をレンダリングするTableComponentがあると想定しています。 TableComponentは、プロ、Test成分からdataを受け取ります。

新しいデータがajax呼び出しで利用可能になるとすぐに、そのデータはTableComponentに渡され、TableComponentは再描画されます。

この場合、状態が変更された場合にのみ変更が行われます。

例として、次のコードスニペットを確認してください。

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>