Javascript 按Enter键对组件进行反应

我有一些react组件，需要使用“回车”功能

class MyComponent extends Component {
    componentDidMount() {
        console.log('componentDidMount');
        document.removeEventListener('keypress', this.enter);
        document.addEventListener('keypress', this.enter.bind(this));
    }

    componentWillUnmount() {
        console.log('componentWillUnmount');
        document.removeEventListener('keypress', this.enter);
    }

    render() {
        return (...);
    }

    enter(target) {
        if (target.charCode === 13) {
            console.log('fired');
            /* after that component unmounted */
        }
    }
}

控制台日志显示：

componentDidMount
fired
componentWillUnmount

---

，但当按Enter键时，控制台再次显示已触发的

事件处理程序。问题是

this.enter.bind（this）

和

this.enter

是不同的函数，因为它们会从原始函数创建新的“包装器”函数

试着这样做：

class MyComponent extends Component {
    constructor () {
        this.enter = this.enter.bind(this)
    }

    componentDidMount() {
        console.log('componentDidMount');
        document.removeEventListener('keypress', this.enter);
        document.addEventListener('keypress', this.enter);
    }

    componentWillUnmount() {
        console.log('componentWillUnmount');
        document.removeEventListener('keypress', this.enter);
    }

    render() {
        return (...);
    }

    enter(target) {
        if (target.charCode === 13) {
            console.log('fired');
            /* after that component unmounted */
        }
    }
}

注意，您需要为

addEventListener

和

removeEventListener

提供相同的函数。enter.bind（this）返回一个新的函数，该函数与

this.enter

函数不同。因此，您的

removeEventListener

将被忽略，因为该特定函数不在事件列表中

记住

this的结果。输入.bind（this）

并在删除时使用它

componentDidMount() {
    console.log('componentDidMount');
    this.boundEnter = this.enter.bind(this);
    document.addEventListener('keypress', this.boundEnter);
}

componentWillUnmount() {
    console.log('componentWillUnmount');
    document.removeEventListener('keypress', this.boundEnter);
}

（也不需要在

componentDidMount

中删除

EventListener

）

因为您使用的是ES2015+语法，所以我假设您正在传输。如果是，您可以使用箭头函数而不是

enter

：

class MyComponent extends Component {
    componentDidMount() {
        console.log('componentDidMount');
        document.addEventListener('keypress', this.enter);
    }

    componentWillUnmount() {
        console.log('componentWillUnmount');
        document.removeEventListener('keypress', this.enter);
    }

    render() {
        return (...);
    }

    enter = target => {
        if (target.charCode === 13) {
            console.log('fired');
            /* after that component unmounted */
        }
    };
}

---

这要求您在transpiler中启用对的处理（在Babel中，它们目前是

第2阶段预设的一部分）。
您的版本可以工作，但在“回车”中需要访问this.props和this.state，这就是我喜欢第一个答案的原因。您可以访问
this.props和
this.state
。