Блог

Главная - Вопросы по программированию - Как я могу предотвратить запуск события onBlur?

Как я могу предотвратить запуск события onBlur?

#javascript #html #reactjs

Вопрос:

Я пытаюсь создать ввод с выпадающим списком, в котором содержатся предложения. У меня есть элемент ввода, который использует onBlur, который технически при нажатии снаружи удалит элемент ul. Когда я нажимаю на элемент ul, он также удаляет элемент ul, который запускает событие onBlur на входе. Есть ли способ реализовать onBlur, который не позволяет элементу ul запускать событие onBlur?

 import React, { useState, useEffect, useRef } from "react";

import "./styles.css";

const Autocomplete = (props) => {
  const [userInput, setUserInput] = useState("");

  const [listResults, setListResults] = useState([]);

  const [openModal, setOpenModal] = useState(false);

  useEffect(() => {
    const filteredResults = props.options.filter((option) =>
      option.includes(userInput)
    );

    setListResults(filteredResults);
  }, [userInput, props.options]);

  const handleInput = (event) => {
    setUserInput(event.target.value);
  };

  const handleInputClick = () => {
    setOpenModal(!openModal);
  };

  const handleClickOption = (data) => {
    setUserInput(data);
    setOpenModal(false);
    ulEl.current.focus();
  };

  return (
    <div className="container">
      <input
        name="search-input"
        value={userInput}
        onChange={handleInput}
        autoComplete="off"
        onFocus={handleInputClick}
        onBlur={handleInputClick}
      />
      <ul className="search-list">
        {openModal amp;amp;
          listResults amp;amp;
          listResults.map((data, key) => (
            <li
              key={key}
              onClick={() => {
                handleClickOption(data);
              }}
            >
              {data}
            </li>
          ))}
      </ul>
    </div>
  );
};

export default Autocomplete;

Любая помощь будет очень признательна

Ответ №1:

Короткий ответ, просто добавьте это в свой элемент

 onMouseDown={(e) => e.preventDefault()}

В этой ситуации позвоните event.preventDefault() на onMouseDown мероприятие. onMouseDown по умолчанию вызовет событие размытия и не будет делать этого при preventDefault вызове. Тогда у onClick вас будет шанс быть призванным. Событие размытия все равно произойдет, только после onClick .

Комментарии:

1. Отличный ответ. Спасибо! Я нашел другое решение, в котором я могу использовать функцию onClick вместо OnMouseDown, так как onBlur происходит сразу после события OnMouseDown.

Ответ №2:

Вы можете использовать атрибут списка <input> с a <datalist> вместо использования a <ul> .

Надеюсь, это подходит для вашего случая.

Метки: