时间戳

首页 > 解决方案 > 如何在 React-Recompose 应用程序中将事件处理程序传递给 React-node

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

问题描述

在以下位置获得工作应用程序：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);

刚开始使用recompose，很多东西对我来说仍然很神奇））我希望一些可以帮助我，通过几天来解决这个问题。

标签： reactjsrefrecompose

解决方案

组合组件存在问题。

上没有bookNode和事件处理程序this。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>
);

这是一个演示。

通常没有理由手动访问 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>
);

推荐阅读