ReactJS에서 POST하는 방법

Question

ReactJs를 처음 사용합니다. 나는 ASP.net 및 reactjs와 함께 무거운 응용 프로그램을 만들려고 노력하고 있습니다. 나는 테이블을 보여 줬다. 이제 폼에서 테이블에 값을 삽입하려고합니다. 같은 방법을 알려주십시오. 컨트롤러와 reactjs 코드를 공유했습니다.

에는 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')) 

입력 폼 성분 :

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 React에 대한 좋은 점은 바로 자바 스크립트라는 것입니다.

여러분이 필요로하는 것은 서버를 작동시키는 POST입니다.

// 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); 
    }); 

:

당신은 둘 다 할 수있는 기본 fetch 기능 또는 전체에 대한 라이브러리 axios

예와 같은 사용을 사용할 수 있습니다