Javascript 如何正确地将ref与React类组件和样式化组件一起使用？

我正在尝试建立一个下拉菜单。基本结构

Test

是我需要使用React

ref

和

样式化组件检测内容区域之外的点击的地方

我已经在中查看了相关文章，但是它们使用了我的类组件上不支持的挂钩

代码如下：

import React from "react";
import PropTypes from "prop-types";
import styled, { ThemeProvider } from "styled-components";

import { theme } from "../theme";

import Icon from "../Icon";

const Container = styled.div`
  display: flex;
`};

const SelectorDiv = styled.div`
  background-color: black;
  color: white;
  height: 100px;
`;

class Test extends React.Component {
  componentDidMount () {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount () {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  handleClickOutside = event => {
    console.log(this.refs); // undefined
  }


  handleClickInside = () => {
    alert("Clicked inside");
  }

  render = () => {

    return (
      <ThemeProvider theme={theme}>
        <Container disabled={disabled}>
          <SelectorDiv
            onClick={this.handleClickInside}
            ref={"wrapper"}
          >
            <h1>This is the content to click</h1>
          </SelectorDiv>
        </Container>
      </ThemeProvider>
    );
  };
}
export default Test;

从“React”导入React；
从“道具类型”导入道具类型；
从“样式化组件”导入样式化的{ThemeProvider}；
从“./theme”导入{theme}；
从“./图标”导入图标；
const Container=styled.div`
显示器：flex；
`};
const SelectorDiv=styled.div`
背景色：黑色；
颜色：白色；
高度：100px；
`;
类测试扩展了React.Component{
组件安装（）{
document.addEventListener（“mousedown”，this.handleclickout）；
}
组件将卸载（）{
document.removeEventListener（“mousedown”，this.handleclickout）；
}
handleClickOutside=事件=>{
console.log（this.refs）；//未定义
}
handleClickInside=（）=>{
警报（“点击内部”）；
}
渲染=（）=>{
返回(
这是要单击的内容
);
};
}
导出默认测试；

ref不是工作属性。当在外部单击时，我在
this.refs上得到
未定义的
。似乎
样式化组件
在这方面有问题，但它在V4上得到了解决（我使用的是V5.1.0）

如何在my
handleOutsideClick中获取包装器组件？
尝试使用ref作为字符串是旧API的传统方式

他们不建议使用：

如果您以前使用过React，您可能会熟悉一个较旧的API，其中ref属性是一个字符串，如“textInput”，DOM节点是作为this.refs.textInput访问的。我们建议不要这样做，因为字符串引用有一些问题，被认为是遗留的，并且可能在将来的某个版本中被删除

注意：如果您当前正在使用this.refs.textInput访问refs，则我们
建议使用回调模式或createRef API
相反

改为使用
React.createRef（）
，您可以使用ref变量的
current
属性访问它，如下所示：




class Test extends React.Component {
  constructor() {
     super(props);
    
     this.selectorRef = React.createRef(null);
  }

  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  handleClickOutside = event => {
    console.log(this.selectorRef.current);
  }


  handleClickInside = () => {
    alert("Clicked inside")
  }

  render = () => {

    return (
      <ThemeProvider theme={theme}>
        <Container disabled={disabled}>
          <SelectorDiv
            onClick={this.handleClickInside}
            ref={selectorRef}
          >
            <h1>This is the content to click</h1>
          </SelectorDiv>
        </Container>
      </ThemeProvider>
    );
  };
}
export default Test;


类测试扩展了React.Component{
构造函数（）{
超级（道具）；
this.selectorRef=React.createRef（null）；
}
componentDidMount（）{
document.addEventListener（“mousedown”，this.handleclickout）；
}
组件将卸载（）{
document.removeEventListener（“mousedown”，this.handleclickout）；
}
handleClickOutside=事件=>{
console.log（this.selectorRef.current）；
}
handleClickInside=（）=>{
警报（“单击内部”）
}
渲染=（）=>{
返回(
这是要单击的内容
);
};
}
导出默认测试；

检查一下

在功能组件中，可以使用React hook
useRef（）



尝试使用ref作为字符串是旧API的传统方式

他们不建议使用：

如果您以前使用过React，您可能会熟悉一个较旧的API，其中ref属性是一个字符串，如“textInput”，DOM节点是作为this.refs.textInput访问的。我们建议不要这样做，因为字符串引用有一些问题，被认为是遗留的，并且可能在将来的某个版本中被删除

注意：如果您当前正在使用this.refs.textInput访问refs，则我们
建议使用回调模式或createRef API
相反

改为使用
React.createRef（）
，您可以使用ref变量的
current
属性访问它，如下所示：




class Test extends React.Component {
  constructor() {
     super(props);
    
     this.selectorRef = React.createRef(null);
  }

  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  handleClickOutside = event => {
    console.log(this.selectorRef.current);
  }


  handleClickInside = () => {
    alert("Clicked inside")
  }

  render = () => {

    return (
      <ThemeProvider theme={theme}>
        <Container disabled={disabled}>
          <SelectorDiv
            onClick={this.handleClickInside}
            ref={selectorRef}
          >
            <h1>This is the content to click</h1>
          </SelectorDiv>
        </Container>
      </ThemeProvider>
    );
  };
}
export default Test;


类测试扩展了React.Component{
构造函数（）{
超级（道具）；
this.selectorRef=React.createRef（null）；
}
componentDidMount（）{
document.addEventListener（“mousedown”，this.handleclickout）；
}
组件将卸载（）{
document.removeEventListener（“mousedown”，this.handleclickout）；
}
handleClickOutside=事件=>{
console.log（this.selectorRef.current）；
}
handleClickInside=（）=>{
警报（“单击内部”）
}
渲染=（）=>{
返回(
这是要单击的内容
);
};
}
导出默认测试；

检查一下

在功能组件中，可以使用React hook
useRef（）



因此，我在代码中没有看到创建引用的地方。他们会从哪里来？我从来没有在类组件中使用过ref，只在功能组件中使用过ref，但您的代码显然不像文档中的示例：您是否创建了react.createRef？mendes，这是在react中使用ref的旧方法，我认为它不再有效，他们不建议这样使用。使用
React.createRef（）
相反，我在代码中没有看到创建引用的地方。他们会从哪里来？我从来没有在类组件中使用过ref，只在功能组件中使用过ref，但您的代码显然不像文档中的示例：您是否创建了react.createRef？mendes，这是在react中使用ref的旧方法，我认为它不再有效，他们不建议这样使用。使用
React.createRef（）
insteadHumm。。同样的行为-
未定义
…现在试试，我更新了我的asnwerNot working。。。构造函数是错误的。。。正在尝试修复…现在检查，沙盒链接包括很好的工作。谢谢。哼。。同样的行为-
未定义
…现在试试，我更新了我的asnwerNot working。。。构造函数是错误的。。。正在尝试修复…现在检查，沙盒链接包含了很好的工作。谢谢。