问将jquery转换为响应js的HOw

EN

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;

    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;

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