Question

当用户点击元素外部时，我尝试制作一个可切换的内容我得到了this.node的错误未定义错误？

handleOutsideClick(e) {
    // ignore clicks on the component itself
    if (this.node.contains(e.target)) {
      return;
    }

    this.handleClick();
  }


  render() {
    return (
      <div ref={node => { this.node = node; }}>
        <button onClick={this.handleClick}>Button handler</button>
        {this.state.visibleContent && <div>Toggle content</div>}
      </div>
    );
  }

代码https://codesandbox.io/s/v38q4zrq7

在渲染方法中，我使用过ref={node => { this.node = node; }}为什么它仍未定义？这是一个使用完全相同的技术https://codepen.io/graubnla/pen/EgdgZm

的工作示例

Answer 1

您的函数handleOutsideClick超出了范围。如果你正在使用babel，你可以直接将它变成箭头功能

handleOutsideClick = (e) => {
    // ignore clicks on the component itself
    if (this.node.contains(e.target)) {
      return;
    }

    this.handleClick();
  }

或者如果这不是一个选项，请在构造函数中绑定它

constructor() {
  super()
  this.handleClick = this.handleClick.bind(this)
}

ref没有使用箭头函数定义反应？

1 个答案: