React를 사용하여 게시물을 추가하는 방법은 무엇입니까?

Question

게시물을 테이블에 추가하는 앱을 만들고 있습니다. 아래 코드는 작동하지 않습니다. 당신은 당신이 바벨을 사용하는 경우

생성자에

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

를 추가 할 필요가 handleAddNewthis에 결합하지 않고

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

: 그것은 나에게이 오류를주고 stage-2 플러그인을 사용하면 인스턴스 메소드를 화살표 함수로 변경할 수 있습니다.

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

대신 생성자에서 바인딩해야합니다. 첫 번째 방법은 상자에서 작동하지만 바벨을 사용하는 경우에는 두 번째 방법을 수행하는 것이 명확합니다.

Answer 2

과 동일한 방법으로 handleAddNew을 this에 바인딩하는 것을 잊었습니다!