mardi 23 mai 2017

How to reloads the table when clicked using AJAX in reactjs

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

    <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




Aucun commentaire:

Enregistrer un commentaire