electron 我甚至不知道从哪里开始做一个缓冲区来保存搜索栏上以前的条目

ki0zmccv  于 2022-12-08  发布在  Electron
关注(0)|答案(1)|浏览(132)

我正在试着做一个电子/React应用程序,它有一个搜索栏的形式,用户可以用上划来替换以前的条目。类似于终端。我唯一的问题是我不知道从哪里开始。任何帮助都将不胜感激

6mw9ycah

6mw9ycah1#

三种状态和一个输入字段

我们可以创建一个简单的Prompt,如下图所示-
| 提示预览|
| - -|
|

|
我们首先定义historyrecallcommand的状态。每当用户在input字段中键入内容时,我们都会更新命令,同时确保清除recall状态(如果有)-

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.minMath.maxevent.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,则跳过此调用-

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属性,这样我们就可以调用以前的会话-

function Prompt({ initHistory = [] }) {
  const [history, setHistory] = React.useState(initHistory)
  // ...
}

然后,您可以通过将Prompt的历史记录作为属性值传递来预加载Prompt的历史记录-

<Prompt initHistory={[ ... ]} />

相关问题