未捕獲的TypeError：無法在React中讀取null的屬性'props'

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

傳遞到Sidebar道具的this.getUserInput函數在調用時未綁定到正確的上下文（ this ）。 您可以例如將其綁定 ：

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

還有其他方法可以解決這個問題。 例如，使用具有詞法this箭頭函數，構造函數中的綁定方法或使用類屬性來定義帶有箭頭函數的方法（ES7）。