nullのプロパティ '小道具'を読むことができません - Reactjs

Question

私は基本的に子コンポーネントの親コンポーネントから関数を呼び出したいと思います。この関数は、親コンポーネントの状態を変更します。

私は親でハンドラを作成し、子コンポーネントに小道具として渡しました。 子コンポーネントで呼び出す必要があります。

親：

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

そして、私はそれが言うハンドラ関数を呼び出すしようとすると、子供で

ヌルのプロパティ '小道具' を読み込めません

子供：

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

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

Answer 1

あなたが適切にコンテキストをバインドする必要があり、子コンポーネントで：

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

以上のコンストラクタにバインドする：

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

またはメソッドとしてそれを呼び出す：

最後に

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

、あなたが必要コールバックを実際に呼び出す：

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