Wie in ReactJS POST

Question

Ich bin neu in ReactJs. Ich arbeite mit ASP.net und redejs, um eine Crud-Anwendung zu erstellen. Ich habe den Tisch angezeigt. Jetzt versuche ich Werte aus Formularen in die Tabelle einzufügen. Bitte lassen Sie mich wissen, wie Sie das Gleiche machen. Ich habe den Controller und den Code geteilt.

EmployeeController:

[RoutePrefix("api/Employee")] 
public class EmployeeController : ApiController 
{ 
    EmployeeEntities db = new EmployeeEntities(); 

    [Route("GetEmployeeList")] 
    public IQueryable<EmployeeTable> GetEmployeeList() 
    { 
     return db.EmployeeTables.AsQueryable(); 
    }  

    [Route("InputEmployee")] 
    public void InputEmployee() 
    { 

    } 
} 

EmployeeJSX.jsx:

var EmployeeRow = React.createClass({ 

     render: function() { 
      return(
       <tr> 
        <td>{this.props.item.EmployeeID}</td> 
        <td>{this.props.item.FirstName}</td> 
        <td>{this.props.item.LastName}</td> 
        <td>{this.props.item.Gender}</td> 
        <td>{this.props.item.Designation}</td> 
        <td>{this.props.item.Salary}</td> 
        <td>{this.props.item.City}</td> 
        <td>{this.props.item.Country}</td> 
       </tr> 

      ); 
     } 
    }); 

    var EmployeeTable = React.createClass({ 

     getInitialState: function(){ 

      return{ 
       result:[] 
      } 
     }, 
     componentWillMount: function(){ 

      var xhr = new XMLHttpRequest(); 
      xhr.open('get', this.props.url, true); 
      xhr.onload = function() { 
       var response = JSON.parse(xhr.responseText); 

       this.setState({ result: response }); 

      }.bind(this); 
      xhr.send(); 
     }, 
     render: function(){ 
      var rows = []; 
      this.state.result.forEach(function (item) { 
       rows.push(<EmployeeRow key={item.EmployeeID} item={item} />); 
     }); 
    return (<table className="table"> 
    <thead> 
     <tr> 
      <th>EmployeeID</th> 
      <th>FirstName</th> 
      <th>LastName</th> 
      <th>Gender</th> 
      <th>Designation</th> 
      <th>Salary</th> 
      <th>City</th> 
      <th>Country</th> 
     </tr> 
    </thead> 

     <tbody> 
      {rows} 
     </tbody> 

    </table>); 
    } 

    }); 

    ReactDOM.render(<EmployeeTable url="api/Employee/GetEmployeeList" />, 
      document.getElementById('grid')) 

Eingabeformular-Komponente:

var InputValues=React.createClass({ 
    handleClick:function(){ 
     this.props.onUserInput(this.refs.firstName.value,this.refs.lastName.value,this.refs.gender.value,this.refs.designation.value,this.refs.salary.value,this.refs.city.value,this.refs.country.value); 
    }, 
    render:function(){ 
    return(
     <div> 
     <form> 
      <label id="firstname">First Name </label><br/> 
      <input type="text" placeholder="Enter First Name" ref="firstName" /> 
      <br/><br/><label id="lastname">Last Name: </label><br/> 
      <input type="text" placeholder="Enter Last Name" ref="lastName" /> 
      <br/><br/><label id="gender">Gender: </label><br/> 
      <input type="text" placeholder="Gender" ref="gender" /> 
      <br/><br/><label id="designation">Designation: </label><br/> 
      <input type="text" placeholder="Enter Designation" ref="designation" /> 
      <br/><br/><label id="salary">Salary: </label><br/> 
      <input type="number" placeholder="Enter Salary" ref="salary" /> 
      <br/><br/><label id="city">City: </label><br/> 
      <input type="text" placeholder="Enter City" ref="city" /> 
      <br/><br/><label id="country">City: </label><br/> 
      <input type="text" placeholder="Enter Country" ref="country" /> 
      <p> 
      <button type="button" onClick={this.handleClick}>Submit</button> 
      </p> 
     </form> 
     </div> 
    ); 
    } 
}); 

Answer 1

W Das Tolle an React ist, dass es nur Javascript ist.

Also alles, was Sie brauchen, ist etwas, um eine POST Ihren Server zu tun!

können Sie verwenden die nativen fetch Funktion oder eine voll-auf-Bibliothek wie axios

Beispiele unter Verwendung von beiden sein könnte:

// Using ES7 async/await 
const post_data = { firstname: 'blabla', etc....}; 
const res = await fetch('localhost:3000/post_url', { method: 'POST', body: post_data }); 
const json = await res.json(); 

---

// Using normal promises 
const post_data = { firstname: 'blabla', etc....}; 
fetch('localhost:3000/post_url', { method: 'POST', body: post_data }) 
.then(function (res) { return res.json(); }) 
.then(function (json) { console.log(json); }; 

---

// AXIOS example straight from their Github 
axios.post('/user', { 
    firstName: 'Fred', 
    lastName: 'Flintstone' 
    }) 
    .then(function (response) { 
    console.log(response); 
    }) 
    .catch(function (error) { 
    console.log(error); 
    });