How to post form data to ASP.NET web api controller in reactjs

I am new to React and I have been trying to implement a simple "employee details" crud application. I was able to get the data from database and display it in table format. But I am not able to post the data from form to database. It will be very helpful if you some one could provide me a detailed jsx code to post data from form to controller. And also controller side code to save data to database. Please find my code below.

This is my model (used entity framework):

public partial class EmployeeTable
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Gender { get; set; }
        public string Designation { get; set; }
        public long Salary { get; set; }
        public string City { get; set; }
        public string Country { get; set; }
    }

Controller:

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

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

        [Route("InputEmployee")]

        public HttpResponseMessage InputEmployee([FromBody]EmployeeTable Employee)
        {
            try
            {
                using (EmployeeEntities entities = new EmployeeEntities())
                {
                    entities.EmployeeTables.Add(Employee);
                    entities.SaveChanges();
                    var message = Request.CreateResponse(HttpStatusCode.Created, Employee);
                    message.Headers.Location = new Uri(Request.RequestUri + Employee.EmployeeID.ToString());
                    return message;
                }
            }
            catch (Exception ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ex);
            }
        }
    }
}

React.jsx code for displaying data from database:

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

Form React jsx code:

var InputValues=React.createClass({
  handleClick:function(){


},

  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">Country: </label><br/>
          <input type="text"  placeholder="Enter Country"  ref="country"   />
          <p>
            <button type="button" onClick={this.handleClick}>Submit</button>
          </p>
        </form>
      </div>
    );
  }
});