reactjs - 如何将事件处理程序传递给 React-Recompose 应用程序中的 React-node

Question

获得工作应用程序:https://github.com/BeerDRinker/recompose-ref

以下代码(/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;

但我需要使用 Recompose 来实现相同的功能。我尝试过，但没有任何效果。我的代码示例(/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);

刚开始使用重组，很多事情对我来说仍然很神奇))我希望有人可以帮助我，经过几天的时间来解决这个问题。

Answer 1

组合组件存在问题。

this 上没有 bookNode 和事件处理程序。 App 是无状态组件，无法访问 this，bookNode 和事件处理程序是 props。

传递给状态处理程序的不是值，而是状态，顾名思义。

应该是:

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>
);

这是一个demo .

通常没有理由手动访问 DOM 来设置事件，因为 React 会处理这个问题。这消除了对 ref 和生命周期钩子(Hook)的需要:

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>
);