1

我在我的项目中使用 Reactstrap 进行 Bootstrap 集成。但是，我还需要使用 Reactstrap 扩展开箱即用onClick的组件的行为。Button为此，我制作了一个自定义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？我在这里能错过什么？

4

3 回答 3

6

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

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

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

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

于 2017-08-17T14:06:15.433 回答
3

当this未在函数上下文中定义时会发生这种情况，因此为了解决这个问题，您只需要绑定此操作，因此，您可以在构造函数方法中绑定 this，也可以在传递时直接将 this 与函数绑定为渲染函数中的道具。

直接在构造函数中绑定

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

作为道具传递：-

<Button onClick={this.onClick.bind(this)/>
于 2017-08-17T14:13:21.963 回答
2

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

onClick(e) {

}

和：

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

并且箭头函数会自动为您绑定所有内容，您无需仅按照定义这些方法的方式更改代码。

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

于 2017-08-17T14:08:32.397 回答