title: How to pass event handlers to React-node in React-Recompose App
body: <p>Got working App at: <a href="https://github.com/BeerDRinker/recompose-ref" rel="nofollow noreferrer">https://github.com/BeerDRinker/recompose-ref</a></p>
  
  <p>Following code(commented part in /src/App.js) works as expected:</p>
  
  <pre><code>class App extends Component {
  constructor(props) {
      super(props);
  
      this.node = React.createRef();
      this.state = {
          value: 1
      };
  }
  
  handleTouchStart = e =&gt; {
      e.preventDefault();
      this.setState({ value: this.state.value + 1 });
  };
  
  handleTouchEnd = e =&gt; {
      e.preventDefault();
      this.setState({ value: this.state.value - 1 });
  };
  
  componentDidMount() {
      this.node.current.ontouchstart = this.handleTouchStart;
      this.node.current.ontouchend = this.handleTouchEnd;
  }
  
  render() {
      return (
          &lt;div&gt;
              &lt;h3&gt;Value: {this.state.value}&lt;/h3&gt;
              &lt;button ref={this.node}&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
      );
      }
  }
  
  export default App;
  </code></pre>
  
  <p>But I need the same functionality by using Recompose. I tried, but got nothing working. My code sample(not commented part in /src/App.js) that don't works:</p>
  
  <pre><code>import React from "react";
      import {
          compose,
          lifecycle,
          setDisplayName,
          withProps,
         withStateHandlers
  } from "recompose";
  
  import "./App.css";
  
  const state = {
      value: 1
  };
  
  const stateHandlers = {
      handleTouchStart: value =&gt; () =&gt; ({
          value: value + 1
      }),
      handleTouchEnd: value =&gt; () =&gt; ({
          value: value - 1
      })
  };
  
  export const enhance = compose(
      setDisplayName("App"),
      withProps(props =&gt; ({
          bookNode: React.createRef()
      })),
      withStateHandlers(state, stateHandlers),
      lifecycle({
          componentDidMount() {
              this.bookNode.current.ontouchstart =   
              this.handleTouchStart;
              this.bookNode.current.ontouchend = this.handleTouchEnd;
          }
      })
  );
  
  export const App = ({ value, bookNode }) =&gt; (
      &lt;div&gt;
          &lt;h3&gt;Value: {value}&lt;/h3&gt;
          &lt;button ref={bookNode}&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
  );
  
  export default enhance(App);
  </code></pre>
  
  <p>Just start using recompose, lot of things still magic for me ))
  I hope some on can help me, pass several days to solve this problem.</p>