无法读取未定义的错误

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 
} 

问题是什么？

谢谢。

Answer 1

您需要绑定trackingStatusUpdate()和statusChanged()类的方法...

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); 
    } 

    ... 
}