React.js: данные не заполняются

Я занимаюсь учебным курсом на сайте React.js. Вот мой код:React.js: данные не заполняются

<html> 
    <head> 
    <title>Hello React</title> 
    <script src="http://fb.me/react-0.8.0.js"></script> 
    <script src="http://fb.me/JSXTransformer-0.8.0.js"></script> 
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 
    </head> 
    <body> 
    <div id="content"></div> 
    <script type="text/jsx"> 
     /** 
     * @jsx React.DOM 
     */ 
     // The above declaration must remain intact at the top of the script. 
     // Your code here 
     var commentsData = [ 
     {author: "Pete Hunt", text: "This is one comment"}, 
     {author: "Jordan Walke", text: "This is *another* comment"} 
     ]; 

     var CommmentBox = React.createClass({ 
     getInitialState: function() { 
      return {data: []}; 
     }, 
     componentWillMount: function() { 
      this.loadComments(); 
     }, 
     render: function() { 
      return (
      <div className='commmentBox'> 
       <h1>Comments</h1> 
       <CommentList data={this.state.data} /> 
       <br /> 
       <CommentForm onCommentSubmit={this.handleCommentSubmit} /> 
      </div> 
     ); 
     }, 
     handleCommentSubmit: function(comment) { 
      commentsData.push(comment); 
      this.loadComments(); 
     }, 
     loadComments: function() { 
      console.log(commentsData.length); 
      this.setState({data: commentsData}); 
     } 
     }); 

     var CommentList = React.createClass({ 
     render: function() { 
      var commentNodes = this.props.data.map(function(comment) { 
      return <Comment author={comment.author} text={comment.text} />; 
      }); 
      return (
      <div className='commentList'> 
       {commentNodes} 
      </div> 
     ); 
     } 
     }); 

     var CommentForm = React.createClass({ 
     render: function() { 
      return (
      <form className='commentForm' onSubmit='handleSubmit'> 
       <input type='text' placeholder='Your name' ref='author'/> 
       <input type='text' placeholder='Your comment' ref='text'/> 
       <input type='submit' value='Post' /> 
      </form> 
     ); 
     }, 
     handleSubmit: function() { 
      var author = this.refs.author.getDOMNode().value.trim(); 
      var text = this.refs.text.getDOMNode().value.trim(); 
      this.props.onCommentSubmit({author: author, text: text}); 
      this.refs.author.getDOMNode().value = ''; 
      this.refs.text.getDOMNode().value = ''; 
      return false; 
     } 
     }); 

     var Comment = React.createClass({ 
     render: function() { 
      return(
      <div className='comment'> 
      <br /> 
       <h3 className='commentAuthor'> 
       {this.props.author} wrote: 
       </h3> 
       <h3 className='commentText'> 
       {this.props.text} 
       </h3> 
      </div> 
     ); 
     } 
     }); 

     React.renderComponent(
     <CommmentBox />, 
     document.getElementById('content') 
    ); 

    </script> 
    </body> 
</html>

Когда я добавляю комментарии, они не отображаются в списке комментариев. Я регистрирую длину массива комментариев на консоли, и он никогда не изменяется. Что я делаю не так?

источник

2014-02-07 tldr

Скомпилировали ли вы его редактор JSX? – Tyblitz

Консоль говорит: «Вы используете встроенный транслятор JSX. Обязательно предварительно скомпилируйте JSX для производства» – tldr

Одна из проблем заключается в том, что ваша форма перезагружается. – Gohn67

Вам нужно сделать это, потому что вы использовали строку в событии onSubmit.

<form className='commentForm' onSubmit={this.handleSubmit}>

Вы это имели в примере кода:

<form className='commentForm' onSubmit='handleSubmit'>

Ваш код вызвал ошибку Uncaught TypeError: string is not a function. Из-за этой ошибки он не ударил функцию handleSubmit, а также вызвал перезагрузку браузера.

источник

2014-02-07 23:13:28 Gohn67

Вот оно, спасибо! Я помню, что переменные javascript должны быть заключены в curlies, не знаю, как я это испортил. – tldr

React.js: данные не заполняются

ответ

Смежные вопросы