Why do onFocus and onBlur not working in my React app-CodePudding

I am trying to toggle a dimmer when search input is focused. On focus I want to display a dimmer with fade animation, on unfocus I want to hide a dimmer with fade animation.

This is my code:

import React from 'react';
import './SearchBox.scss';
import {IoSearchOutline} from 'react-icons/io5'
import $ from "jquery";

class SearchBox extends React.Component {

      render() {
      
        function Dimmer() {
          const FocusInput = () => {
            $(".searchDimmer").fadeIn(200);
          }
          const BlurInput = () => {
            $(".searchDimmer").fadeOut(200);
          }
        }

        return (
        <div className="SearchBox">
          <input
              onFocus={FocusInput}
              onBlur={BlurInput}
              type="text" 
              className='SearchBoxInput' 
              id="SearchBoxInput"  />
            <button 
              className='SearchBoxSubmitButton ButtonCore button' 
              type='submit'>
                <IoSearchOutline />
              </button> 
          </div>
        )
      }

};

export default SearchBox;

Thanks.

CodePudding user response：

This might solve your problem

import React from 'react';
import './SearchBox.scss';
import {IoSearchOutline} from 'react-icons/io5'
import $ from "jquery";

class SearchBox extends React.Component {

    FocusInput() {
        $(".searchDimmer").fadeIn(200);
    }

    BlurInput() {
        $(".searchDimmer").fadeOut(200);
    }
    render() {

        return (
            <div className="SearchBox">
                <input
                    onFocus={this.FocusInput}
                    onBlur={this.BlurInput}
                    type="text"
                    className='SearchBoxInput'
                    id="SearchBoxInput"  />
                <button
                    className='SearchBoxSubmitButton ButtonCore button'
                    type='submit'>
                    <IoSearchOutline />
                </button>
            </div>
        )
    }
}

export default SearchBox;