在React样式组件上使用&#39；ref&39；不起作用

Using #39;ref#39; on React Styled Components is not working(在React样式组件上使用#39；ref39；不起作用)

问题描述

我在使用ref样式组件时遇到困难。当我尝试在如下所示的类方法中访问它们时，我收到以下错误：

Edit.js：42未捕获的类型错误：此.....包含的不是函数

  constructor(props) {
    ....
    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
   }
----------
  setWrapperRef = (node) => {
    this.wrapperRef = node;
  }
  handleEdit = (e) => {
    e.preventDefault();
    this.props.onEdit(this.props.id, this.state.title);
  }
----------
<Wrapper onSubmit={this.handleEdit} ref={this.setWrapperRef}>
  ...
</Wrapper>

我从this question

我做错了什么？

推荐答案

我自己找到了答案。解决方案是使用innerRef而不是ref，因为ref本身指向样式化组件而不是DOM节点。

有关详细讨论，请参阅GitHub

这篇关于在React样式组件上使用&#39；ref&39；不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！