React 组件中的“无法读取未定义的属性‘onClick’”

Question

我在我的项目中使用 Reactstrap 进行 Bootstrap 集成。但是，我还需要扩展 Button 组件的 onClick 行为，该组件使用 Reactstrap 开箱即用。为此，我制作了一个自定义的NanoButton 组件，它重新组合了默认组件。我就是这样称呼它的：

<NanoButton type="button" onClick={() => Router.push('/about')}>About</NanoButton>

正如我所说，NanoButton 组件将我的自定义 onClick 功能添加到现有的 Button 类中：

import { Component } from 'react';
import { Button } from 'reactstrap';

class NanoButton extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }
  onClick(e) {
        var circle = document.createElement('div');
        e.target.appendChild(circle);
        var d = Math.max(e.target.clientWidth, e.target.clientHeight);
        circle.style.width = circle.style.height = d + 'px';
        var rect = e.target.getBoundingClientRect();
        circle.style.left = e.clientX - rect.left -d/2 + 'px';
        circle.style.top = e.clientY - rect.top - d/2 + 'px';
        circle.classList.add('ripple');

        this.props.onClick();
  }
  render() {
    return (
      <Button
        className={this.props.className}
        type={this.props.type}
        color={this.props.color}
        size={this.props.size}
        onClick={this.onClick}
      >
        {this.props.children}
      </Button>
    );
  }
}

export default NanoButton;

如您所见，我需要NanoButton 组件执行一些自定义活动，然后最终执行作为道具传递给它的onClick 函数。但是在浏览器中加载时，它在this.props.onClick(); 处失败，说它无法读取onClick on undefined？我会在这里遗漏什么？

Answer 1

您的onClick 方法未绑定到您的类上下文，因此无法访问this.props。

通常的解决方案是在你的构造函数中绑定这个方法：

constructor(props) {
  super(props);
  this.onClick = this.onClick.bind(this);
}

另一种选择是按照建议在渲染方法中进行绑定，但这意味着绑定将在每次渲染时完成，而不是仅使用构造函数解决方案一次。

Answer 2

当this没有在函数context中定义时会发生这种情况，所以为了解决这个问题你只需要绑定这个动作，所以你可以在你的构造函数方法中绑定它或者每当它在渲染函数中作为道具传递时，您都可以直接将它与函数绑定。

直接在构造函数中绑定

constructor(props){
 super(props);
 this.onClick = this.onClick.bind(this);
}

作为道具传递：-

<Button onClick={this.onClick.bind(this)/>

Answer 3

如果您想忘记何时绑定方法，可以替换以下样式：

onClick(e) {

}

与：

onClick = (e) => {
  this.props.onClick();
}

而且箭头函数会自动为你绑定一切，你不需要改变你的代码，只需要你定义这些方法的方式。

onClick on undefined错误的原因是因为onClick确实是在缺少onClick方法定义的Dom元素范围内定义的。