Значение не определено в React.JS View ASP.NET MVC

Question

Я создаю систему управления библиотеками для добавления книг в мою базу данных. Я делаю это через ASP.NET MVC, и мое мнение в REACT.JS Мой контроллер для CREATE BOOK:

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

Мой взгляд на React.js выглядит следующим образом Ошибка наступает Uncaught TypeError: Невозможно прочитать свойство 'значение' из неопределенного Я также добавил снимок экрана, чтобы легче было указать на мою ошибку.

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