Kann Eigenschaft 'Requisiten' von Null nicht lesen - Reactjs

Question

Grundsätzlich möchte ich eine Funktion von der übergeordneten Komponente in untergeordneten Komponente aufrufen. Diese Funktion ändert den Status der übergeordneten Komponente.

Ich habe einen Handler in Eltern erstellt und übergab es als Stütze an untergeordnete Komponente. Jetzt möchte ich es in Kind-Komponente aufrufen.

Parent:

state = { formstep: '1'} 
    constructor(props) { 
    super(props) 
    this.handler = this.handler.bind(this) 
    } 
    handler(e) { 
    e.preventDefault() 
    this.setState({ 
     formstep: '2' 
    }) 
} 

render() { 
    return (
     <Form1 handler = {this.handler} /> 
    ) 
} 

Und Kind, wenn ich versuche Handler-Funktion zu nennen, sagt er

nicht Eigentum 'Requisiten' von null

Kind kann lesen:

handleClick() { 
    //Saving Some data from form 
    //and calling parent function 
    this.props.handler; 
} 

render() { 
    return (
     <button onClick={this.handleClick}>Continue</button> 
    ) 
} 

Answer 1

In geordnete Komponente müssen Sie Zusammenhang richtig binden:

<button onClick={this.handleClick.bind(this)}>Continue</button> 

oder besser in Konstruktor binden:

this.handleClick = this.handleClick.bind(this) 
// => <button onClick={this.handleClick}>Continue</button> 

oder als Methode aufrufen:

<button onClick={() => this.handleClick()}>Continue</button> 

Schließlich müssen Sie um Ihren Rückruf tatsächlich anzurufen:

handleClick() { 
    this.props.handler(); 
    //  note ------^ 
}