javascript - How change onMouseMove handler in other handler with react component?

Question

How we can change the handlerOnMouseMove inside other handler (in my example OnClick). I show an example below; normally when I do this this.handleMouseMove = undefined; it should disable my event onMouseMove but unfortunately it is not working.

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

question from:https://stackoverflow.com/questions/65871597/how-change-onmousemove-handler-in-other-handler-with-react-component

Answer 1

Try this:

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");
  }
}