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

Question

我正在开发一个将帖子添加到表格的应用程序。我的下面的代码不起作用。它给了我这个错误:

Uncaught TypeError: Cannot read property 'props' of null(…) for function handleAddNew()

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;

Answer 1

您没有将handleAddNew绑定(bind)到您需要添加的this

this.handleAddNew = this.handleAddNew.bind(this);

在你的构造函数中

如果您使用 babel 并且有 stage-2 插件，您可以将实例方法更改为箭头函数，如下所示:

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

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