javascript - 无法读取 null 的属性 'props' - Reactjs

<分区>

基本上我想在子组件中调用父组件的函数。该函数将改变父组件的状态。

我在父组件中创建了一个处理程序并将其作为 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} />
    )
 }

在 child 中，当我尝试调用处理函数时，它说

Cannot read property 'props' of null

child :

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

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

最佳答案

在子组件中，您需要正确绑定(bind)上下文:

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

或更好地在构造函数中绑定(bind):

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

或将其作为方法调用:

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

最后，您需要实际调用您的回调:

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

关于javascript - 无法读取 null 的属性 'props' - Reactjs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46278001/

上一篇：javascript - `${}` 在 Angular 中有什么用？

下一篇：javascript - Number(id) 或 +id 根据输入值产生不同的值

相关文章：

JavaScript 迭代 Page 中的所有变量

reactjs - 如何改变material-ui对话框的位置？

javascript - 使生成的二维码可在React项目上下载

javascript - Material UI 断点设置方向 : portrait and landscape view

javascript - Sequelize 和 Node.js : Initializing Multiple Databases On One Server Programmatically

java - 如何从 Ajax 或 JavaScript 调用 Struts1 Action？

javascript - 使用 RegEx 替换字符串的一部分 - Javascript

javascript - Uncaught Error : Target container is not a DOM element.(React 网页不会显示任何内容)

reactjs - 使用@mmfpeg React 连接多个视频时出现 "memory access out of bounds"错误

javascript - jQuery——能够显示颜色的选择器或选择器插件