使用 JQuery 获取部分类名返回 null

Question

我在代码和框中有这段代码，但是当我尝试使用 JQuery 从 div 获取部分类名时它返回 null。我怎样才能让它工作？

Codesandbox Code example

import React, { Component } from "react";
import "./styles.css";
import $ from "jquery";

export default class App extends Component {
  componentDidMount() {
    $(".MainContainer").on("mousedown", function(evt) {
      $(".MainContainer").on("mouseup mousemove", function handler(evt) {
        alert(
          $(this)
            .attr("class")
            .match(/\bsizes[^\s]+\b/)
        );
      });
    });
  }

  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return <div className="MainContainer sizes" />;
  }
}

css 类：

.MainContainer {
  background: #282c34;
  position: relative;
  display: flex;
  min-height: 100vh;
}

Answer 1

首先，我强烈建议不要在你的 React 代码中使用 jQuery，但是如果你必须使用 ref 实用程序来处理 dom 事件并让 React 处理它们，而不是直接使用 jQuery。

除了为on()方法使用多个事件之外，传递一个具有多个方法的对象而不是嵌套它们。

我建议使用console.log() 而不是alert() 方法来检索任何数据或DOM 元素以防止错误。

最后我评论了你的正则表达式，看看它是否有效。正则表达式返回 null 但其余代码正在运行。

View on Codesandbox

PS：反应方式如下。

import React, { Component } from "react";
import "./styles.css";
import $ from "jquery";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.myRef = React.createRef();
  }

  componentDidMount() {
    $(this.myRef.current).on({
      mousedown: function(evt) {
        console.log(
          $(this).attr("class")
          // .match(/\bsizes[^\s]+\b/)
        );
      },
      mouseup: function(evt) {
        console.log(
          $(this).attr("class")
          // .match(/\bsizes[^\s]+\b/)
        );
      },
      mousemove: function(evt) {
        console.log(
          $(this).attr("class")
          // .match(/\bsizes[^\s]+\b/)
        );
      }
    });
  }

  render() {
    return <div className="MainContainer sizes" ref={this.myRef} />;
  }
}

反应方式

因为我建议只使用 react 来处理 DOM 元素，所以我也会发布 React 代码。

注意：我对事件进行了循环，但您可以手动重复事件以降低复杂性。此外，我使用find() 循环通过DOMTokenList 值并检查它们以匹配正则表达式。我评论了该行以防止正则表达式检查的响应。

View on Codesandbox

import React, { Component } from "react";
import "./styles.css";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.eventHandler();
  }

  eventHandlerCallback = e => {
    console.log(
      Object.values(e.target.classList)
      // .find(item => item.match(/\bsizes[^\s]+\b/))
    );
  };

  eventHandler = () => {
    const events = ["mousedown", "mouseup", "mousemove"];
    events.map(e =>
      this.myRef.current.addEventListener(e, this.eventHandlerCallback)
    );
  };

  render() {
    return <div className="MainContainer sizes" ref={this.myRef} />;
  }
}