React.js：數據未填充

Question

我正在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>

當我添加評論時，它們不會顯示在評論列表中。 我正在將注釋數組的長度記錄到控制台，它永遠不會改變。 我究竟做錯了什么？

Answer 1

您需要執行此操作，因為您在onSubmit事件中使用了一個字符串。

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

你在示例代碼中有這個：

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

您的代碼導致Uncaught TypeError: string is not a function錯誤。 由於該錯誤，它沒有訪問handleSubmit函數，也導致瀏覽器重新加載。

React.js：數據未填充

問題描述

1 個解決方案

解決方案1
7 已采納 2014-02-07 23:13:28

React.js：數據未填充

問題描述

1 個解決方案

解決方案1 7 已采納 2014-02-07 23:13:28

解決方案1
7 已采納 2014-02-07 23:13:28