Question

我有一个React组件，其上面有一个Redux容器，我想处理滚动事件：

import React from 'react';

export default class Visualization extends React.Component {
    render() {
        function handleScroll(e) {
            if (e.deltaY > 0) {
                console.log("YO");
                this.props.stepForward();  // stepForward inherited from above
            } else {
                console.log("DAWG");
                this.props.stepBack();  // stepBack inherited from above
            }
        }

        return <div onWheel={handleScroll}>"HELLO WORLD"</div>;
    }
}

但是，此代码会引发错误，因为当this最终作为事件的一部分被调用时，this.props.stepForward()不会绑定任何内容。

React教程handles this case，添加构造函数并在其中调用this.handleClick = this.handleClick.bind(this);。或者，等效地：

import React from 'react';

export default class Visualization extends React.Component {
    constructor() {
        super();
        this.handleScroll = this.handleScroll.bind(this);
    }
    render() {
        function handleScroll(e) {
            if (e.deltaY > 0) {
                console.log("YO");
                this.props.stepForward();  // stepForward inherited from above
            } else {
                console.log("DAWG");
                this.props.stepBack();  // stepBack inherited from above
            }
        }

        return <div onWheel={handleScroll}>"HELLO WORLD"</div>;
    }
}

但据我了解（告诉我，如果我错了），这不再是纯粹的功能组件，Redux真的希望我尽可能使用纯组件。

是否有一种模式可以将此事件处理程序添加到我的组件而不必使用显式构造函数？

Answer 1

如果您需要DOM事件的处理程序，您的组件可能太复杂而不能成为纯组件。没有组件具有作为纯组件（对于React，Redux或任何相关库），它只是理想的，因为它们往往更简单，并且在将来的React版本中具有性能优势。要修复此组件，请将其更改为：

import React from 'react';

export default class Visualization extends React.Component {
    constructor() {
        super();
        this.handleScroll = this.handleScroll.bind(this);
    }

    handleScroll(e) {
        if (e.deltaY > 0) {
            console.log("YO");
            this.props.stepForward();  // stepForward inherited from above
        } else {
            console.log("DAWG");
            this.props.stepBack();  // stepBack inherited from above
        }
    }

    render() {   
        return <div onWheel={handleScroll}>"HELLO WORLD"</div>;
    }
}

P.S。如果您希望此组件是纯粹的，请从React.PureComponent扩展您的课程，而不是React.Component。或者，您可以使组件成为函数而不是类。

将事件处理程序添加到纯React组件？

1 个答案: