КАК конвертировать jquery, чтобы реагировать js

Question

У меня есть jquery код, как мы можем преобразовать его в React js Я хочу добиться onfocus и onblur при вводе, чтобы добавить и удалить класс по специфике c div.

У кого-либо есть идеи как мы можем достичь этого.

$("input#password").focus(function() {
  $("#overlay").addClass("newoverlay");
}).blur(function() {
  $("#overlay").removeClass("newoverlay");
});

HTML

<div id="overlay" class="">Focus/Blur</div>
<input type="txt" id="password"/>

Answer 1

Если нет необходимости применять определенный класс, вы можете просто использовать css только с селектором фокуса. См. Здесь https://www.w3schools.com/cssref/sel_focus.asp

Например

#overlay:focus {
 some-property: true;
}

Затем импортируйте файл css в настройку реагирования. (Например, с помощью create-реакции-приложения)

Answer 2

import React from 'react';

const foo: React.FC = () => {
  const [isFocused, setFocus] = React.useState(false);

  const handleFocus = () => {
    setFocus(true);
  };

  const handleBlur = () => {
    setFocus(false);
  };

  return (
    <div
      className={`someClass ${isFocused && 'focus'}`}
      onFocus={handleFocus}
      onBlur={handleBlur}
    >
      hello
    </div>
  );
}

export default foo;

вот код, который вы ищете.

вы можете проверить событие реакции по следующей ссылке https://reactjs.org/docs/events.html

, а также используя имена классов или clsx - хорошая идея.

Answer 3

Нет необходимости конвертировать этот код в 'React' из jQuery. Простой способ - это просто добавить $, чтобы добавить этот код, как в следующем методе. Это будет работать.

    import React from 'react';
    import $ from 'jquery';

    function ExampleFunction(props) {

      $(document).ready(function() {
        $("input#password").focus(function() {
         $("#overlay").addClass("newoverlay");
        }).blur(function() {
          $("#overlay").removeClass("newoverlay");
        });
      });

return (<React.Fragment>
<div> Your code </div>
</React.Fragment>);
}

export default ExampleFunction;

Вам может потребоваться обновить этот код на основе классов или функциональных компонентов соответственно.