你如何在 React.js 中处理关键事件？

Question

我正在使用 React.js 处理我的第一个项目，并且在关键事件处理方面遇到了一些问题。 似乎我正在遵循我在网上非常精确地找到的示例。 有些人可以看看并告诉我他们看到了什么错误吗？

var ScreenplayElement = React.createClass({
    handleKeyPress: function(e) {
        if (e.keyCode == 13) {
            e.preventDefault();
            console.log("New action to be created");
        }
    },
    render: function () {
        var classString = this.props.type + " screenplay-el";

        return (
        <p className={classString} contentEditable onKeyPress={this.handleKeyPress}><br /></p>
        );
    }
});

Answer 1

尝试使用 KeyboardEvent.key (e.key) 代替。 请参阅Mozilla 文档。

var ScreenplayElement = React.createClass({
    handleKeyPress: function(e) {
        if (e.key === "Enter") {
            e.preventDefault();
            console.log("New action to be created");
        }
    },
    render: function () {
        var classString = this.props.type + " screenplay-el";

        return (
        <p className={classString} contentEditable onKeyPress={this.handleKeyPress}><br />Content goes in here</p>
        );
    }
});

根据 MDN：KeyboardEvent.keyCode 已弃用。

此功能已从 Web 标准中删除。 虽然一些浏览器可能仍然支持它，但它正在被删除。 不要在旧项目或新项目中使用它。 使用它的页面或 Web 应用程序可能随时中断。

提示：如果直接在 if 语句之前放置 console.log() 消息，它将立即触发。 通过这种方式，您可以确定问题是事件处理程序还是 if 语句:-)