定義されていないエラーのプロパティ '小道具'を読み取ることができません

Question

私は親から子への通信を試みていますので、私は小道具を使用しています。少し問題があります。 StatusChanged（）関数を使用するとエラーが発生します。

私の親（App.JS）ファイルがあります：

class App extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { trackingStatus: true }; 
    } 

    trackingStatusUpdate(data) 
    { 
     console.log(data); 
    } 

    render() { 
    return (
     <div className="App"> 
     <Switcher trackingStatus={this.state.trackingStatus} trackingStatusUpdate={this.trackingStatusUpdate} /> 
     </div> 
    ); 
    } 
} 

は、そして、私の子供が（Switcher.JS）ファイルがあります：

class Switcher extends Component { 


    constructor(props) { 
     super(props); 
     this.state = { 
      trackingStatus: this.props.trackingStatus 
     }; 
    } 


    statusChanged() 
    { 
     this.props.trackingStatusUpdate(this.state.trackingStatus); 
    } 

    render() { 
     return (
      <div> 
       <h3>Tracking Mode</h3> 
       <label className="switch"> 
        <input type="checkbox" defaultChecked={this.state.trackingStatus} onChange={this.statusChanged} id="switch" /> 
        <div className="slider round"></div> 
       </label> 
      </div> 
     ); 
    } 

} 

Switcher.defaultProps = { 
    trackingStatus: true 
} 

問題は何ですか？

ありがとうございます。あなたがtrackingStatusUpdate()とstatusChanged()クラスメソッドをバインドする必要があり

Answer 1

...

class App extends Component{ 
    constructor(props){ 
    super(props); 
    this.state = {trackingStatus: true}; 

    this.trackingStatusUpdate = this.trackingStatusUpdate.bind(this); 
    } 

    ... 
} 

class Switcher extends Component{ 
    constructor(props){ 
    super(props); 
    this.state = {trackingStatus: this.props.trackingStatus}; 

    this.statusChanged = this.statusChanged.bind(this); 
    } 

    ... 
}