三种状态和一个输入字段

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

|
我们首先定义history、recall和command的状态。每当用户在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.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，则跳过此调用-

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={[ ... ]} />