Value Undefined In React.JS View ASP.NET MVC - asp.net-mvc

Question

I am Making a Lib Managment System to Add Books to My DB.
I am doing this through ASP.NET MVC AND my view is in REACT.JS
My Controller for CREATE BOOK is :
public ActionResult Create()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "BookName,BookSerialNumber,BookAuther,BookPublisher")] Book book)
{
using (LibraryManagmentSystemDBEntities db = new LibraryManagmentSystemDBEntities())
if (ModelState.IsValid)
{
db.Books.Add(book);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(book);
}
My view which is in React.js is as follows
Error is coming Uncaught TypeError: Cannot read property 'value' of undefined
I have also added a screen shot so that it is easier to point my mistake out.
<div id="app" class="container">
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
class InputValues extends React.Component
{
constructor(props)
{
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e)
{
e.preventDefault();
const data = new FormData();
data.append('BookName', this.BookName.value);
data.append('BookSerialNumber', this.BookSerialNumber.value);
data.append('BookAuther', this.BookAuther.value);
data.append('BookPublisher', this.BookPublisher.value);
var xhr = new XMLHttpRequest();
xhr.open('post', this.props.url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function()
{
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200)
{
alert("good!!!");
}
}
xhr.send(data);
}
render()
{
return(
<div>
<form onSubmit={this.handleSubmit}>
<label htmlFor="BookName">Book Name </label><br />
<input id="BookName" type="text" placeholder="Enter BookName" ref={this.BookName} />
<br /><br />
<label htmlFor="BookSerialNumber">Book Serial Number: </label><br />
<input id="BookSerialNumber" type="text" placeholder="Enter BookSerialNumber" ref={this.BookSerialNumber} />
<br /><br />
<label htmlFor="BookAuther">BookAuther: </label><br />
<input id="BookAuther" type="text" placeholder="BookAuther" ref={this.BookAuther} />
<br /><br />
<label htmlFor="BookPublisher">BookPublisher: </label><br />
<input id="BookPublisher" type="text" placeholder="Enter BookPublisher" ref={this.BookPublisher} />
<br /><br />
<p>
<button type="submit">Submit</button>
</p>
</form>
</div>
);
}
}
ReactDOM.render
(<InputValues />, document.getElementById("app"));
</script>