title: Adding an event handler to a pure React component?
body: <p>I have a React component with a Redux container on top of it that I want to handle scroll events on:</p>
  
  <pre><code>import React from 'react';
  
  export default class Visualization extends React.Component {
      render() {
          function handleScroll(e) {
              if (e.deltaY &gt; 0) {
                  console.log("YO");
                  this.props.stepForward();  // stepForward inherited from above
              } else {
                  console.log("DAWG");
                  this.props.stepBack();  // stepBack inherited from above
              }
          }
  
          return &lt;div onWheel={handleScroll}&gt;"HELLO WORLD"&lt;/div&gt;;
      }
  }
  </code></pre>
  
  <p>This code will raise an error, however, because <code>this</code> is not bound to anything when <code>this.props.stepForward()</code> finally gets called as part of the event.</p>
  
  <p>The React tutorial <a href="https://facebook.github.io/react/docs/handling-events.html" rel="nofollow noreferrer">handles this case</a> by adding a constructor and calling <code>this.handleClick = this.handleClick.bind(this);</code> within it. Or, equivalently:</p>
  
  <pre><code>import React from 'react';
  
  export default class Visualization extends React.Component {
      constructor() {
          super();
          this.handleScroll = this.handleScroll.bind(this);
      }
      render() {
          function handleScroll(e) {
              if (e.deltaY &gt; 0) {
                  console.log("YO");
                  this.props.stepForward();  // stepForward inherited from above
              } else {
                  console.log("DAWG");
                  this.props.stepBack();  // stepBack inherited from above
              }
          }
  
          return &lt;div onWheel={handleScroll}&gt;"HELLO WORLD"&lt;/div&gt;;
      }
  }
  </code></pre>
  
  <p>But as I understand it (tell me if I'm wrong), this is no longer a purely functional component, and Redux really wants me to be using pure components whenever possible.</p>
  
  <p>Is there a pattern for adding this event handler to my component without having to resort to an explicit constructor?</p>