如何改变onMouseMove处理程序在其他处理程序与react组件?

Question

我们如何在其他处理程序中更改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

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

Answer 2

您可以为您正在跟踪的包装器创建"鼠标移动"添加"鼠标移动"一旦组件挂载该引用的事件侦听器，并在单击按钮后将其删除。提示，没有更多的"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>
);
}
}