我正在试着做一个电子/React应用程序,它有一个搜索栏的形式,用户可以用上划来替换以前的条目。类似于终端。我唯一的问题是我不知道从哪里开始。任何帮助都将不胜感激
6mw9ycah1#
三种状态和一个输入字段
我们可以创建一个简单的Prompt,如下图所示-| 提示预览|| - -|||我们首先定义history、recall和command的状态。每当用户在input字段中键入内容时,我们都会更新命令,同时确保清除recall状态(如果有)-
Prompt
history
recall
command
input
function Prompt() { const [history, setHistory] = React.useState([]) // history of all commands const [recall, setRecall] = React.useState(0) // recall state const [command, setCommand] = React.useState("") // current command const onChange = event => { setCommand(event.target.value) setRecall(0) } return <div> {"> "}<input onChange={onChange} value={command} /> </div> }
检测特殊按键
接下来,我们在onKeyDown事件监听器中附加了Up、Down和Enter键的监听器。为了使recall状态保持在范围内,我们使用Math.min和Math.max。event.preventDefault用于防止浏览器对这些特定键的默认行为做出响应-
onKeyDown
Math.min
Math.max
event.preventDefault
function Prompt() { // ... const onKeyDown = event => { switch (event.keyCode) { case 38: // UP press event.preventDefault() setRecall(Math.max(-history.length, recall - 1)) break case 40: // DOWN press event.preventDefault() setRecall(Math.min(0, recall + 1)) break case 13: // ENTER press event.preventDefault() console.log("execute(", command, ")") setHistory([...history, command]) setCommand("") setRecall(0) break } } return <div> {"> "}<input onKeyDown={onKeyDown} onChange={onChange} value={command} /> </div> }
重新调用命令效果
最后,添加一个效果,每当recall状态改变时,使用recall状态更新command。调用-1意味着调用最后一个命令,-2是倒数第二个命令,以此类推。如果是0,则跳过此调用-
-1
-2
0
function Prompt() { // ... React.useEffect(_ => { if (recall == 0) return setCommand(history[history.length + recall]) }, [recall]) return <div> {"> "}<input onKeyDown={onKeyDown} onChange={onChange} value={command} /> </div> }
演示版
运行下面的代码以在您自己的浏览器中验证结果-第一个
还原上一个会话
如果您希望将历史记录保存在localStorage或其他地方,您可以在Prompt中添加一个initHistory属性,这样我们就可以调用以前的会话-
initHistory
function Prompt({ initHistory = [] }) { const [history, setHistory] = React.useState(initHistory) // ... }
然后,您可以通过将Prompt的历史记录作为属性值传递来预加载Prompt的历史记录-
<Prompt initHistory={[ ... ]} />
1条答案
按热度按时间6mw9ycah1#
三种状态和一个输入字段
我们可以创建一个简单的
Prompt
,如下图所示-| 提示预览|
| - -|
|
|
我们首先定义
history
、recall
和command
的状态。每当用户在input
字段中键入内容时,我们都会更新命令,同时确保清除recall
状态(如果有)-检测特殊按键
接下来,我们在
onKeyDown
事件监听器中附加了Up、Down和Enter键的监听器。为了使recall
状态保持在范围内,我们使用Math.min
和Math.max
。event.preventDefault
用于防止浏览器对这些特定键的默认行为做出响应-重新调用命令效果
最后,添加一个效果,每当
recall
状态改变时,使用recall
状态更新command
。调用-1
意味着调用最后一个命令,-2
是倒数第二个命令,以此类推。如果是0
,则跳过此调用-演示版
运行下面的代码以在您自己的浏览器中验证结果-
第一个
还原上一个会话
如果您希望将历史记录保存在localStorage或其他地方,您可以在
Prompt
中添加一个initHistory
属性,这样我们就可以调用以前的会话-然后,您可以通过将Prompt的历史记录作为属性值传递来预加载Prompt的历史记录-