ReactJS-在子事件处理程序中处理父事件

Question

I have a react container where I want to capture mousemove events. That is pretty straight forward. Further I have a react sub-component rendered by the container where actually the logic for the mousemove event handler resides. So I need to pass/delegate the mousemove event from the container parent to the child and get the mousemove handler of the child invoked. How is that done properly?

I need to capture the mouse event in the container rather than the sub-component because the container is a larger HTML element in the DOM and I need to capture events in that whole area.

The mousemove-handler-logic needs to be in the sub-component as it encapsulates some functionality the container should not be aware of.

The render method of the container:

render() {
    return (
        <div data-component="MyContainer"
             onMouseMove={(event) => this.handleMousemove(event)}>

            <MySubComponent {// ... give some props here}>
        </div>
    );
}

I tried an approach where MyContainer sets callback functions for MySubComponent to retrieve its DOM Node and register handler with addEventListener but that did not work consistently as occasionally the DOM Node got undefined:

export default class MyContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {};

        this.getContainerRef = this.getContainerRef.bind(this);
    }

    getContainerRef() {
        return this.refs['containerWrap'];
    }

    render() {
        return (
            <div data-component="MyContainer"
                 ref="containerWrap"
                 onMouseMove={(event) => this.handleMousemove(event)}>

                <MySubComponent getContainerRef={this.getContainerRef} />
            </div>
        );
    }
}

export default class MySubComponent extends Component {
    constructor(props) {
        // ... init something

        this.handleMousemove = this.handleMousemove.bind(this);
    }

    componentDidMount() {
        // add event listener for parent application frame
        let containerDOM = this.props.getContainerRef();
        containerDOM.addEventListener('mousemove', this.handleMousemove, false);
    }

    componentWillUnmount() {
        // remove event listener from parent application frame
        let containerDOM= this.props.getContainerRef();
        containerDOM.removeEventListener('mousemove', this.handleMousemove, false);
    }

    handleMousemove(event) {
        // handle the event
    }

    // ... more methods
} 

I also tried to call the mousemove event handler in MySubComponent directly from MyContainer via this.refs.SubComponent.handleMousemove but that is regarded to be bad practise in react-redux.

Answer 1

Working with refs should be avoided if possible.

If you want to capture the onMouseMove in the parent container I think best is to just pass the relevant properties of the event to your child component. When the values change in the parent componentWillReceiveProps and shouldComponentUpdate in the child component get invoked and you can react to it.

class Container extends React.Component{
  constructor(props) {
    super(props);
      this.state = {
        mouseX: 0,
        mouseY: 0
      };
    }
  handleMouse(event) {
    event.preventDefault();
    this.setState({
      mouseX: event.clientX,
      mouseY: event.clientY
    });
  }

  render() {
    return <div onMouseMove={(event) => this.handleMouse(event)} className="demo">
        <Child x={this.state.mouseX} y={this.state.mouseY} />
    </div>;
    }
}

And your Child component:

class Child extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.handleMouseMove(nextProps.x, nextProps.y);
  }
  handleMouseMove(x, y) {
    if (x < 150) { // return true to invoke render for some conditions
      // your code
      return true;
    }  
    return false;
  }

  render() {
    return <div>Child Component</div>;
  }
}

However your implementation in the child component will look like. It just has to know about its props and nothing about its parent component.

react component lifecycle: https://facebook.github.io/react/docs/component-specs.html

Answer 2

Although your mousemove should be in the subcomponent and your container should use mapDispatchtoProps, like this

const mapDispatchToProps = (dispatch) => {
  return {
    onmousemoveAction: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

and in your subcomponent dispatch(onmousemoveAction)

But if you still want to have logic in subcomponent do

this.refs.mysubcomponent.dispatchEvent(new Event('mousedown'))