反应钩子 - 当我点击 Enter 时开始搜索

Question

在下面的示例中：

import React, { useState } from 'react';
function App() {
const [userQuery, setUserQuery] = useState('');
const searchUserQuery = (e) => {
window.open(`http://google.com/search?q=${userQuery}`);
};
return (
<div className='App'>
<div className='form'>
<input
type='text'
value={userQuery}
onChange={(e) => setUserQuery(e.target.value)}
/>
<button onClick={searchUserQuery}>Google Search</button>
</div>
</div>
);
}
export default App;

单击按钮后，将打开一个新的浏览器选项卡，其中包含Google并显示搜索结果。

但是，它仅在我单击按钮时才有效。如果我在输入中写了一些东西并按键盘上的Enter 键，则没有任何反应。

不是在表单中按 Enter 键应该触发表单吗？ 如何修改我的代码，以便按 Enter 键启动该过程？

Answer 1

你应该使用form元素和onSubmit事件。以下是您将要使用的内容：

import React, { useState } from 'react';
function App() {
const [userQuery, setUserQuery] = useState('');
const searchUserQuery = (e) => {
e.preventDefault()
window.open(`http://google.com/search?q=${userQuery}`);
};
return (
<div className='App'>
<form className='form' onSubmit={searchUserQuery}>
<input
type='text'
value={userQuery}
onChange={(e) => setUserQuery(e.target.value)}
/>
<button type="submit">Google Search</button>
</form>
</div>
);
}
export default App;