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

时间:2018-10-22 19:09:24

标签: reactjs ref recompose

正在运行的应用程序位于: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);

刚开始使用重组,很多事情对我来说还是很神奇的)) 希望有人能帮助我,过几天解决这个问题。

1 个答案:

答案 0 :(得分:3)

组成组件有问题。

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

传递给 state 处理程序的不是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>
);

这里是demo

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