Question

基本上我想从子组件中的父组件调用一个函数。该功能将改变父组件的状态。

我在父级中创建了一个处理程序，并将其作为prop传递给子组件。现在我想在子组件中调用它。

父：

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

在我尝试调用处理程序函数时，在孩子那里说

无法阅读属性＆＃39;道具＆＃39;为null

孩子：

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 ------^
}

无法读取属性＆＃39;道具＆＃39; of null - Reactjs

1 个答案: