Question

我正在制作一个带有轻微语法突出显示的伪终端模拟器。如果用户输入一个有效的命令，它会以一种方式着色，如果不是，则不同。

基于布尔状态变量的三元表达式更新 CSS 只是在我逻辑上预期的之后更新一个“步骤”。

例如，如果我输入“ls”，状态显示它是预期的“ls”，但 isValid 仍然为 false。然后，无论我之后做什么，无论是添加一个字符还是删除一个，isValid都会变为true。

如果 command = lsQ 那么 isValid 将为“true”。然后添加更多的字符并删除回 lsQ 而不是 isValid 将是错误的。

代码如下：

import React, { useState } from "react";

// some example terminal commands
const availableCommands = new Set(["cat", "ls", "cd", "echo"]);
const ShellLine = ({ location }) => {

   // currently typed command
   const [command, setCommand] = useState("");

   // is command one of the available commands?
   const [isValid, setIsValid] = useState(false);

   return (
      <div>
         <div className="location">{location}</div>
         <div className="inputLine">
            <div className="lineStartSymbol">❯ </div>
            <input
               autofocus="autofocus"
               id="cmdInput"
               onChange={(e) => {
                  setCommand(e.target.value);
                  setIsValid(availableCommands.has(command));
                  console.log({ command, isValid });
               }}
               onKeyDown={(e) => {
                  if (e.key === "Enter") {
                     alert(command); // test enter works
                  }
               }}
               className={isValid ? "valid-command" : "invalid-command"}
            ></input>
         </div>
         // for debugging
         <div>Command: {command}</div>
         <div>isValid: {isValid ? "True" : "False"}</div>
      </div>
   );
};

export default ShellLine;

我也试过内联 css 直接改变颜色，但瓶颈是 isValid 似乎比命令更新晚。显然我误解了反应状态更新和渲染更新的生命周期。

动态 CSS 与反应状态“一步”不同步

0 个答案: