如何使用反应组件更改其他处理程序中的 onMouseMove 处理程序？答案

【问题标题】：How change onMouseMove handler in other handler with react component?如何使用反应组件更改其他处理程序中的 onMouseMove 处理程序？
【发布时间】：2021-01-24 14:13:00
【问题描述】：

我们如何在其他处理程序中更改handlerOnMouseMove（在我的示例中为OnClick）。我在下面展示一个例子；通常当我这样做时this.handleMouseMove = undefined; 它应该禁用我的事件onMouseMove 但不幸的是它不起作用。

import React from 'react' 
import {render} from 'react-dom'
import './BasicComponent.css'

class BasicComponent extends React.Component {

  constructor (props){
    super(props)
    this.state = {
      id: "id",
      title: "component",
      inputs: [],
      outputs: [],
    }

    this.handleClick = this.handleClick.bind(this)
    this.handleMouseDown = this.handleMouseDown.bind(this)
    this.handleMouseUp = this.handleMouseUp.bind(this)
    this.handleMouseMove = this.handleMouseMove.bind(this)

  }
    render() {
        console.log("render");
        return(
          <div  className="component" 
                onMouseDown={ this.handleMouseDown } 
                onMouseUp={ this.handleMouseUp }
                onMouseMove={ this.handleMouseMove }>
            <div className="title">Title</div>
            <div className="id">ID: c_356545454</div>
            <div className="inputs">inputs</div>
            <div className="core">core</div>
            <div className="outputs">outputs</div>
            <button onClick={ this.handleClick } >Disable handler onMouseMove</button>
          </div>
        );
    }

    handleClick() {
      this.handleMouseMove = undefined; // <===== this not disable the call on handleMouseMove ??? 
      console.log("handleClick : handleMouseMove is disabled");
    }

    handleMouseDown() {
      console.log("handleMouseDown");
    }

    handleMouseUp() {
      console.log("handleMouseUp");
    }

    handleMouseMove() {
      console.log("handleMouseMove");
    }
}

export default BasicComponent

【问题讨论】：

标签： javascript reactjs event-handling dom-events react-component

【解决方案1】：

试试这个：

class BasicComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: "id",
      title: "component",
      inputs: [],
      outputs: [],
      disableMouseMove: false,
    };

    this.handleClick = this.handleClick.bind(this);
    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.handleMouseUp = this.handleMouseUp.bind(this);
    this.handleMouseMove = this.handleMouseMove.bind(this);
  }
  render() {
    const { disableMouseMove } = this.state;
    return (
      <div
        className="component"
        onMouseDown={this.handleMouseDown}
        onMouseUp={this.handleMouseUp}
        onMouseMove={disableMouseMove ? () => {} : this.handleMouseMove}
      >
        <div className="title">Title</div>
        <div className="id">ID: c_356545454</div>
        <div className="inputs">inputs</div>
        <div className="core">core</div>
        <div className="outputs">outputs</div>
        <button onClick={this.handleClick}>Disable handler onMouseMove</button>
      </div>
    );
  }

  handleClick() {
    this.setState({ disableMouseMove: true }); // <===== this not disable the call on handleMouseMove ???
    console.log("handleClick : handleMouseMove is disabled");
  }
}

【讨论】：

【解决方案2】：

您可以为正在跟踪“mousemove”的包装器 div 创建Ref，在组件安装后为该 ref 添加“mousemove”事件侦听器，并在单击按钮后将其删除。提示，包装 div 不再有“onMouseMove”。下面我还用箭头函数替换了你的类方法，以避免绑定它们。

export default class BasicComponent extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      id: "id",
      title: "component",
      inputs: [],
      outputs: [],
    }
    this.myRef = React.createRef()
  }

  componentDidMount(){
    this.myRef.current.addEventListener('mousemove', this.handleMouseMove)
  }

  handleClick = () => {
    this.myRef.current.removeEventListener('mousemove', this.handleMouseMove)
    console.log("handleClick : handleMouseMove is disabled");
  }

  handleMouseDown = () => {
    console.log("handleMouseDown");
  }

  handleMouseUp = () => {
    console.log("handleMouseUp");
  }

  handleMouseMove = () => {
    console.log("handleMouseMove");
  }

  render() {
    console.log("render");
    return (
      <div ref={this.myRef} className="component"
        onMouseDown={this.handleMouseDown}
        onMouseUp={this.handleMouseUp}
         >
        <div className="title">Title</div>
        <div className="id">ID: c_356545454</div>
        <div className="inputs">inputs</div>
        <div className="core">core</div>
        <div className="outputs">outputs</div>
        <button onClick={this.handleClick} >Disable handler 
onMouseMove
        </button>
      </div>
    );
  }
}

【讨论】：