Javascript onKeyDown会在任何地方触发，而不是仅在一个页面上触发

我有一个类似这样的类，我试图在按下enter键时触发某些函数

class List extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            ...
        };
        this.setReady = this.setReady.bind(this);
    }

    componentDidMount() {
        //other stuff
        document.addEventListener('keydown', this.onKeyPressed.bind(this));
    }

    componentWillUnmount() {
        document.removeEventListener('keydown', this.onKeyPressed.bind(this));
    }

    handleSearch() {
         let value = document.getElementById('search-holder').value;
         let names = ['address', 'page'];
         let values = [value, 0];
         this.updatePublications(names, values, true);
    }

    onKeyPressed(e) {
        if (e.keyCode === 13) {
            this.handleSearch();
        } 
    }

    render(){...}

}

基本上，我想在页面内按enter键时触发handleSearch（）。但是，在整个webapp上按enter键时，似乎会触发handleSearch（）。 我怎样才能解决这个问题

列表仅在my App.js上调用

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: null,
        };
    }

    componentDidMount() {
        this.setState({username: LocalStorageService.getUsername()});
    }

    updateUsername = (username) => {
        this.setState({username: username});
    };

    render() {
        return (
            <div className='App'>
                <BrowserRouter basename={process.env.PUBLIC_URL}>
                    <Suspense fallback={<div>Loading</div>}>
                        <Navbar updateUsername={this.updateUsername} username={this.state.username} />
                        <Switch>
                            <Route exact path='/' component={Home} />
                            <Route exact path='/List' component={List} />
                            // all my other routes
                        </Switch>
                    </Suspense>
                </BrowserRouter>
            </div>
        );
    }
}

export default App;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户名：null，
};
}
componentDidMount（）{
this.setState（{username:LocalStorageService.getUsername（）}）；
}
updateUsername=（用户名）=>{
this.setState（{username:username}）；
};
render（）{
返回(
//我所有的其他路线
);
}
}
导出默认应用程序；

如果您使用的是单页应用程序，

文档将持续存在，因此您的事件侦听器不会消失。您试图使用生命周期函数
componentWillUnmount（）
删除它，但如果列表组件由于状态更新而重新呈现，则原始事件侦听器中的函数实例不再存在，因此无法删除它

尝试将函数放在父组件中，并通过道具向下传递，以便这些函数保持不变，并可在以后用于删除事件侦听器。
如果您使用的是单页应用程序，
文档保持不变，因此您的事件侦听器不会消失。您试图使用生命周期函数
componentWillUnmount（）
删除它，但如果列表组件由于状态更新而重新呈现，则原始事件侦听器中的函数实例不再存在，因此无法删除它

尝试将函数放在父组件中，并通过道具向下传递，以便这些函数保持不变，以后可以用于删除事件侦听器。
您正在应用组件中添加一个侦听器，我猜可以渲染应用程序中的几乎所有其他内容。因此，即使您可能在其他地方，如果该组件由App组件呈现，那么侦听器仍将处于活动状态。我建议您在搜索所在的html输入元素中使用
onKeyPress
属性

粗略的例子：

handleOnKeyPress = (event) => {
  // on key press logic here 
}

render() {
  return (
    <>
      {/* ... */}
        <input type="search" onKeyPress={handleOnKeyPress} />
      {/* ... */}
    </>
  )
}



handleOnKeyPress=（事件）=>{
//关于按键逻辑
}
render（）{
返回(
{/* ... */}
{/* ... */}
)
}

如果您想让逻辑留在父组件中，只需在那里定义它并将其作为道具传递

希望这就是您要寻找的答案。
您在应用程序组件中添加了一个侦听器，我猜可以渲染应用程序中的几乎所有其他内容。因此，即使您可能在其他地方，如果该组件由App组件呈现，那么侦听器仍将处于活动状态。我建议您在搜索所在的html输入元素中使用
onKeyPress
属性

粗略的例子：

handleOnKeyPress = (event) => {
  // on key press logic here 
}

render() {
  return (
    <>
      {/* ... */}
        <input type="search" onKeyPress={handleOnKeyPress} />
      {/* ... */}
    </>
  )
}



handleOnKeyPress=（事件）=>{
//关于按键逻辑
}
render（）{
返回(
{/* ... */}
{/* ... */}
)
}

如果您想让逻辑留在父组件中，只需在那里定义它并将其作为道具传递

希望这就是你想要的答案。
当你使用document.addEventListener（'keydown'，this.onKeyPressed.bind（this）），您说应该将事件侦听器添加到整个文档中

添加列表器时使用元素引用

<YOUR-ELEMENT>.addEventListener('keydown', this.onKeyPressed.bind(this));

.addEventListener（'keydown'，this.onKeyPressed.bind（this））；

类似的方法是，在卸载时删除事件侦听器时，将其从元素本身中删除

要阅读更多关于元素引用的内容，您可以在使用document.addEventListener（'keydown'，this.onKeyPressed.bind（this））时查看官方文档
，您说应该将事件侦听器添加到整个文档中

添加列表器时使用元素引用

<YOUR-ELEMENT>.addEventListener('keydown', this.onKeyPressed.bind(this));

.addEventListener（'keydown'，this.onKeyPressed.bind（this））；

类似的方法是，在卸载时删除事件侦听器时，将其从元素本身中删除

要阅读更多关于元素引用的内容，您可以查看官方文档
此列表组件在整个webapp上被调用了吗？您可以分享更多代码吗？很想知道列表组件在哪里以及如何使用。现在，它应该只为列表所在的页面触发keydown事件。不，只在App.js上。这个列表组件在整个webapp上被调用了吗？你能再分享一些代码吗？很想知道列表组件在哪里以及如何使用。现在，它应该只为列表所在的页面触发keydown事件。不，只在App.js上。在这种情况下，
是什么？我的输入html id？这是一个html元素（本例中为输入元素），也可以简单地引用为
document.getElementById（“inputElementId”）请参见此处的示例（）当我这样做时，我得到的
this.handleSearch不是一个函数。虽然它可以与警报一起工作，但如果我能够调用该函数，那就太好了。我刚刚将onKeyPressed转换为arrow函数，它似乎可以工作。非常感谢。在这种情况下，
是什么？我的输入html id？这是一个html元素（本例中为输入元素），也可以简单地引用为
document.getElementById（“inputElementId”）请参见此处的示例（）我得到
this.handleSearch不是一个函数