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

그게 다야, 고마워! 나는 자바 스크립트 변수가 curlies로 묶여 있다는 것을 기억하고, 나는 그것을 어떻게 엉망으로 만들 었는지 모른다. – tldr

React.js : 데이터가 입력되지 않습니다.

답변

관련 문제