Question

我在我的项目中使用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组件在最终执行作为prop传递给它的onClick函数之前执行一些自定义活动。但是在浏览器中加载时，它在this.props.onClick();处失败，说它无法读取onClick on undefined？我可以在这里找到什么？

Answer 1

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

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

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

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

Answer 2

当在函数上下文中未定义constructor(props){ super(props); this.onClick = this.onClick.bind(this); }时会发生这种情况，所以为了解决这个问题你只需要绑定这个动作，所以为了做到这一点，你可以在你的构造函数中绑定它方法或者你可以直接将它与函数绑定，只要它在渲染函数中作为道具传递。

直接在构造函数中绑定

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

作为道具传递： -

enter code here


<RatingBar
            android:id="@+id/ratingBar"
            style="?android:ratingBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:isIndicator="false"
            android:rating="4"
            android:stepSize="0.5" />

Answer 3

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

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

使用：

onClick on undefined

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

(错误的原因是因为确实onClick是在没有onClick方法定义的Dom元素范围内定义的。

“无法在React组件中读取未定义的属性'onClick'

3 个答案: