잡히지 않은 TypeError : 응답에서 null의 of 'property'속성을 읽을 수 없습니다.

Question

이것은 부모에게 데이터를 전달해야하는 자손 구성 요소입니다.

class Sidebar extends React.Component { 

    getUserInput(event){ 
    event.preventDefault(); 
    let value = document.getElementById('input-button').value; 
    console.log(value); 
    this.props.handleSubmit(value); 
    } 


    render() { 
    return (
     <div> 
      <input type="text" id="input-button" placeholder="YGUID" /> 

      <button type="button" className="btn btn-info btn-icons" onClick={this.getUserInput} /> 

     </div> 
    ); 

    } 
} 

Sidebar.propTypes = { 
    handleSubmit: React.PropTypes.func 
}; 

여기가 부모가 handleSubmit을 호출하는 곳입니다.

...... 
handleSubmit(data){ 
    console.log(data); 
    } 
    render(){ 
    return(
     <div className="col-md-2 left-pane"> 
      <Sidebar handleSubmit= {this.handleSubmit}/> 
     </div> 

    ); 
    } 

다음과 같은 오류가 발생합니다.

Uncaught TypeError: Cannot read property 'props' of null 

여기서 잘못된 것은 무엇입니까?

Answer 1

this.getUserInputSidebar에 전달 된 함수는 호출 될 때 올바른 컨텍스트 (this)에 바인딩되지 않습니다. 당신은 예를 bind하기에 :

<Sidebar handleSubmit={this.handleSubmit.bind(this)}/> 

이 sovle하는 방법 다른 옵션도 있습니다. 예를 들어 어휘가 this 인 화살표 함수를 사용하거나 생성자에서 바인딩 메서드를 사용하거나 클래스 속성을 사용하여 화살표 함수 (ES7)가있는 메서드를 정의 할 수 있습니다.