React app error:`Uncaught TypeError:无法读取属性'refs'为null`

Question

我只是发布组件的代码:

class AddPostForm extends React.Component {
  createPost(event) {
    event.preventDefault();
    let post = {
      title : this.refs.title.value,
      name : this.refs.name.value,
      desc : this.refs.desc.value,
      image : this.refs.image.value
    }
    this.props.addPost(post);
    this.refs.postForm.reset();
  }
  render() {
    return (
      <div className="callout secondary form-area">
        <h5>Add a Post to the React Blog</h5>
        <form className="post-edit" ref="postForm" onSubmit={this.createPost}>
          <label>Post Title
            <input type="text" ref="title" placeholder="Post Title" required/>
          </label>
          <label>Author Name
            <input type="text" ref="name" placeholder="Full Name required" required/>
          </label>
          <label>Post Body
          <textarea
            ref="desc"
            placeholder="Write your post here" required/>
          </label>
          <label>Image URL - <span className="highlight">use this one to test 'http://bit.ly/1P9prpc'</span>
            <input type="url" ref="image" placeholder="The URL of the featured image for your post" required/>
          </label>
          <button type="submit" className="button">Add Post</button>
        </form>
      </div>
    )
  }
}

createPost触发该函数时,控制台会记录一个错误:Uncaught TypeError:无法读取null的属性'refs'.

然而,当我将代码转换回ES5时,它可以工作:

var AddPostForm = React.createClass({
  createPost : function(event) {
    event.preventDefault();
    // take the data from the form and create an object
    var post = {
      title : this.refs.title.value,
      name : this.refs.name.value,
      desc : this.refs.desc.value,
      image : this.refs.image.value
    }
    // add the post to the App State
    this.props.addPost(post);
    this.refs.postForm.reset();
  },
  render : function() {
    return (
      <div className="callout secondary form-area">
      <h5>Add a Post to the React Blog</h5>
        <form className="post-edit" ref="postForm" onSubmit={this.createPost}>
          <label>Post Title
            <input type="text" ref="title" placeholder="Post Title" required/>
          </label>
          <label>Author Name
            <input type="text" ref="name" placeholder="Full Name required" required/>
          </label>
          <label>Post Body
          <textarea
            ref="desc"
            placeholder="Write your post here" required/>
          </label>
          <label>Image URL - <span className="highlight">use this one to test 'http://bit.ly/1P9prpc'</span>
            <input type="url" ref="image" placeholder="The URL of the featured image for your post" required/>
          </label>
          <button type="submit" class="button">Add Post</button>
        </form>
      </div>
    )
  }
});

Answer 1

你应该设置this为createPost,因为ES2015React中的类没有autobinding,但是当你使用时存在这个功能React.createClass

class AddPostForm extends React.Component {
   constructor(props) {
      super(props);
      this.createPost = this.createPost.bind(this);
   } 

   ....
}

自动绑定