如何在ReactJS中发布 [英] How to POST in ReactJS

问题描述

我是ReactJs的新手.我正在使用ASP.net和reactjs创建一个Crud应用程序.我已经显示了表格.现在，我试图将值从表单插入表中.请让我知道该怎么做.我已经共享了控制器和reactjs代码.

I am new to ReactJs. I am working with ASP.net and reactjs to create a crud application. I have displayed the table. Now I am trying to insert values into table from forms. Please let me know how to do the same. I have shared the controller and reactjs code.

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

推荐答案

React的妙处在于它只是Javascript.

Well the great thing about React is that it's just Javascript.

因此，您所需要做的就是执行POST来完成服务器的工作！

So all you need is something to do a POST do your server!

您可以使用本机获取函数或诸如 axios

You can use the native fetch function or a full-on library like axios

同时使用这两个示例可能是:

Examples using both could be:

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

这篇关于如何在ReactJS中发布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！