javascript - 如何使用React添加帖子？

我正在开发一个将帖子添加到表中的应用程序。我下面的代码不起作用。它给了我这个错误：
Uncaught TypeError:无法读取的空（…）属性“props”
函数handleadNew（）

import React from 'react';

class App extends React.Component {
    constructor(props) {
     super(props);
      this.state = {
        number:'1',
        name:'gogo',
        title:'',
        views:'10',
        likes:'22',
        date:'1.1.1111'
    };
  }
    addPost(title){
      this.state.title.push(title);
      this.setState({
        post: this.state.title
      });
  }
   render() {
      return (
         <div>
            <AddPost addNew={this.addPost} />
            <table>
                <thead>
                    <Thead/>
                </thead>
                <tbody>
                    <Row number={this.state.number}
                        name={this.state.name}
                        title={this.state.title}
                        views={this.state.views}
                        likes={this.state.likes}
                        date={this.state.date}/>
                </tbody>
            </table>
         </div>
      );
   }
}
class AddPost extends React.Component{
    constructor(props) {
     super(props);
      this.state = {
        newPost: ''
     }
     this.updateNewPost = this.updateNewPost.bind(this);
  }
  updateNewPost(e){
    this.setState({newPost: e.target.value});
  }
  handleAddNew(){
    this.props.addNew(this.state.newPost);
    this.setState({newPost: ''});
  }
  render(){
    return (
        <div>
          <input type="text" value={this.state.newPost} onChange={this.updateNewPost} />
          <button onClick={this.handleAddNew}> Add Post </button>
        </div>
    );
  }
}
class Thead extends React.Component {
   render() {
      return (
        <tr>
            <td id='number'>ID</td>
            <td id='name'>User name</td>
            <td id='title'>Post title</td>
            <td id='views'>Views</td>
            <td id='likes'>Likes</td>
            <td id='date'>Created at</td>
        </tr>
      );
   }
}
class Row extends React.Component {
   render() {
      return (
        <tr>
            <td>{this.props.number}</td>
            <td>{this.props.name}</td>
            <td>{this.props.title}</td>
            <td>{this.props.views}</td>
            <td>{this.props.likes}</td>
            <td>{this.props.date}</td>
        </tr>
      );
   }
}

export default App;

最佳答案

您没有将handleAddNew绑定到需要添加的this
this.handleAddNew = this.handleAddNew.bind(this);
在你的构造器里
如果您使用的是babel并且有stage-2插件，那么您可以将实例方法更改为箭头函数，如下所示：

handleAddNew = () => {
  // do stuff
}

而不必在构造函数中绑定它。第一种方法是开箱即用的，但是如果你用的是babel，那么第二种方法肯定更干净。