javascript - 输入路由另一个页面的键

Question

我有一个搜索框的输入。我必须喜欢；为搜索写下我的话，然后在我按下回车键后，它必须进入另一个带有输入值的页面。所以我可以使用查询字符串访问该值。那么我如何在按下回车后路由另一个具有输入值的页面？谢谢你的帮助！我只是添加了用于捕捉输入的代码。

 useEffect(() => {
    const listener = (event) => {
      if (event.code === "Enter" || event.code === "NumpadEnter") {
        alert("Enter key was pressed. Run your function.");
        event.preventDefault();
         
         
      }
    };
    document.addEventListener("keydown", listener);
    return () => {
      document.removeEventListener("keydown", listener);
    };
  }, []);

标签： javascriptnode.jsreactjstypescriptreact-router

Answer 1

您不一定要设置事件侦听器，使用onKeyDown事件处理程序也可以。Enter 键的代码是13，所以我们只需要检测它。

将您的值保持在一个状态（此处，myValue），检测您是否按下了 Enter 键（此处，使用keyPressHandler方法），最后，将参数传递给您的路由。

import {useHistory} from "react-router-dom"

function App() {
  let history = useHistory();

  const [myValue, setMyValue] = useState("");

  const handleChange = ({ target: { value } }) => {
    setMyValue(value);
  };

  const keyPressHandler = (e) => {
    if (e.which === 13) {
      // alert("You pressed enter!");
      history.push("/process/" + myValue);
    }
  };

  return (
    <div className="App">
      <input value={myValue} onKeyDown={keyPressHandler} onChange={handleChange} />
    </div>
  );
}

工作代码沙盒链接