Reactjs 如何在React-Recompose应用程序中将事件处理程序传递给React节点

已在以下位置获取工作应用程序：

以下代码（在/src/App.js中注释的部分）按预期工作：

class App extends Component {
constructor(props) {
    super(props);

    this.node = React.createRef();
    this.state = {
        value: 1
    };
}

handleTouchStart = e => {
    e.preventDefault();
    this.setState({ value: this.state.value + 1 });
};

handleTouchEnd = e => {
    e.preventDefault();
    this.setState({ value: this.state.value - 1 });
};

componentDidMount() {
    this.node.current.ontouchstart = this.handleTouchStart;
    this.node.current.ontouchend = this.handleTouchEnd;
}

render() {
    return (
        <div>
            <h3>Value: {this.state.value}</h3>
            <button ref={this.node}>Submit</button>
        </div>
    );
    }
}

export default App;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.node=React.createRef（）；
此.state={
价值：1
};
}
handleTouchStart=e=>{
e、 预防默认值（）；
this.setState（{value:this.state.value+1}）；
};
handleTouchEnd=e=>{
e、 预防默认值（）；
this.setState（{value:this.state.value-1}）；
};
componentDidMount（）{
this.node.current.ontouchstart=this.handleTouchStart；
this.node.current.ontouchend=this.handleTouchEnd；
}
render（）{
返回(
值：{this.state.Value}
提交
);
}
}
导出默认应用程序；

但我需要使用“重新组合”来实现相同的功能。我试过了，但没有成功。我的代码示例（未在/src/App.js中注释的部分）不起作用：

import React from "react";
    import {
        compose,
        lifecycle,
        setDisplayName,
        withProps,
       withStateHandlers
} from "recompose";

import "./App.css";

const state = {
    value: 1
};

const stateHandlers = {
    handleTouchStart: value => () => ({
        value: value + 1
    }),
    handleTouchEnd: value => () => ({
        value: value - 1
    })
};

export const enhance = compose(
    setDisplayName("App"),
    withProps(props => ({
        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 }) => (
    <div>
        <h3>Value: {value}</h3>
        <button ref={bookNode}>Submit</button>
    </div>
);

export default enhance(App);

从“React”导入React；
进口{
组成
生命周期，
setDisplayName，
用道具，
与国家处理者
}从“重组”；
导入“/App.css”；
常量状态={
价值：1
};
常量stateholders={
handleTouchStart:value=>（）=>({
值：值+1
}),
handleTouchEnd:value=>（）=>({
值：值-1
})
};
export const enhance=compose(
setDisplayName（“应用程序”），
带道具（道具=>({
bookNode:React.createRef（）
})),
使用stateHandlers（状态，stateHandlers），
生命周期({
componentDidMount（）{
this.bookNode.current.ontouchstart=
这是handleTouchStart；
this.bookNode.current.ontouchend=this.handleTouchEnd；
}
})
);
导出常量应用=（{value，bookNode}）=>(
值：{Value}
提交
);
导出默认增强（App）；

刚开始使用重组，很多东西对我来说仍然很神奇。）

---

我希望有人能帮我，用几天的时间来解决这个问题。

组合组件有问题

此上没有

bookNode

和事件处理程序

App

是无状态组件，无法访问

this

，

bookNode

和事件处理程序

传递给状态处理程序的不是

value

，而是

state

，顾名思义

应该是：

const stateHandlers = {
    handleTouchStart: state => () => ({
        value: state.value + 1
    }),
    handleTouchEnd: state => () => ({
        value: state.value - 1
    })
};

export const enhance = compose(
    setDisplayName("App"),
    withProps(props => ({
        bookNode: React.createRef()
    })),
    withStateHandlers(state, stateHandlers),
    lifecycle({
        componentDidMount() {
            this.props.bookNode.current.ontouchstart = this.props.handleTouchStart;
            this.props.bookNode.current.ontouchend = this.props.handleTouchEnd;
        }
    })
);

export const App = ({ value, bookNode }) => (
    <div>
        <h3>Value: {value}</h3>
        <button ref={bookNode}>Submit</button>
    </div>
);

const stateholders={
handleTouchStart:state=>（）=>({
值：state.value+1
}),
handleTouchEnd:state=>（）=>({
值：state.value-1
})
};
export const enhance=compose(
setDisplayName（“应用程序”），
带道具（道具=>({
bookNode:React.createRef（）
})),
使用stateHandlers（状态，stateHandlers），
生命周期({
componentDidMount（）{
this.props.bookNode.current.ontouchstart=this.props.handleTouchStart；
this.props.bookNode.current.ontouchend=this.props.handleTouchEnd；
}
})
);
导出常量应用=（{value，bookNode}）=>(
值：{Value}
提交
);

这是一个例子

通常没有理由手动访问DOM来设置事件，因为React会处理这个问题。这样就不需要ref和生命周期挂钩：

export const enhance = compose(
    setDisplayName("App"),
    withStateHandlers(state, stateHandlers)
);

const App = ({ value, handleTouchStart, handleTouchEnd }) => (
    <div>
        <h3>Value: {value}</h3>
        <button onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>Submit</button>
    </div>
);

export const enhance=compose(
setDisplayName（“应用程序”），
withStateHandlers（状态，状态处理程序）
);
常量应用=（{value，handleTouchStart，handleTouchEnd}）=>(
值：{Value}
提交
);

在我的情况下，我需要防止默认启动。但在Google Chrome中，他们在56及以上版本中删除了.preventdefult（）方法。更多信息请点击此处：