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 个答案: