Блог

Главная - Вопросы по программированию - реагируйте на изменение значения состояния при нажатии клавиши

реагируйте на изменение значения состояния при нажатии клавиши

#javascript #reactjs

Вопрос:

Я хочу создать функцию, которая будет переключать состояние при нажатии определенной кнопки.

 const keydown = () => {
    window.addEventListener("keydown", (e) => {
      if (e.code === "KeyY") {
        setSortOpen(!sortOpen);
      }
    });
  };

Здесь я ожидаю, что всякий раз, когда я нажимаю Y кнопку, она переключает значение состояния, но то, что я получил, изменится только при первом щелчке, а остальная часть теста даст тот же результат.

Ответ №1:

 import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [sortOpen, setSortOpen] = useState(false);

  window.addEventListener("keydown", (e) => {
    if (e.code === "KeyY") {
      setSortOpen(!sortOpen);
    }
  });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {sortOpen ? "true" : "false"}
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Я не уверен, как выглядит ваша реализация, но это работает для меня.

Ответ №2:

Лучше использовать useState крючок, если вы хотите переключить состояние при нажатии кнопки.

Вот более подробная информация о useState 

 import { useState } from "react";

export default function App() {
const [sortOpen,setSortOpen] = useState(false);

const keydown = (event) => {
 event.preventDefault();
    setSortOpen(!sortOpen);
    console.log(sortOpen);
};

return (
  <div className="App">
  <button onClick={keydown}>Click</button>
  </div>
 );
}
Метки: