1

Нужно загрузить на страницу карточки, после того, как пользователь нажмет на Enter.

Изначально запрос и компонента выглядят следующим образом:

const Adverts = () => {
  const [adverts, setAdverts] = useState([]);

  useEffect(() => {
    const getAdverts = async () => {
      try {
        const res = await axios.get("http://localhost:5000/api/adverts");
        console.log(res.data);
        setAdverts(res.data);
      } catch (err) {}
    };
    getAdverts();
    console.log(adverts);
  }, []);

  return (
    <div style={{ display: "flex", flexDirection: "column" }} >
      {adverts.map((item) => (
        <Advert item={item} key={item.id} />
      ))}
    </div>
  );
};

Пробовала добавить в div onKeyPress, и передала туда функцию, но все равно не получается вызвать getAdverts, когда нажимаю на Enter.

const Adverts = () => {
  const [adverts, setAdverts] = useState([]);
   const getAdverts = () => {
      const res = axios.get("http://localhost:5000/api/adverts").then((res)=> {
         setAdverts(res.data);
     });
      console.log(res.data);
  };

  useEffect(getAdverts, []);

  return (
    <div
      style={{ display: "flex", flexDirection: "column" }}
      onKeyPress={getAdverts}
    >
      {adverts.map((item) => (
        <Advert item={item} key={item.id} />
      ))}
    </div>
  );
};

Есть в Реакте еще какой-нибудь способ обрабатывать нажатие на клавиши?

1 ответ 1

2

Вы можете в useEffect компонента добавить document.addEventListener('keydown', getAdverts) Но и важно очищать событие, чтобы не было утечки память

useEffect(() => {
  document.addEventListener('keydown', getAdverts)
  return () => {
    document.removeEventListener('keydown', getAdverts)
  }
})

Но в свою функцию getAdverts вам нужно добавить условие на нажатие Enter

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.