React 应用程序错误：`Uncaught TypeError: Cannot read property 'refs' of 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: Cannot read property 'refs' of null。

然而，当我将代码转换回 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

你应该为createPost设置this，因为在React中使用ES2015类没有autobinding，但是当你使用React.createClass时这个特性存在

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

   ....
}

Autobinding