How to change color when input loses focus?

Question

React

In the code, I wrote that when I click on the input, the container changes the background, but how to make it so that when the focus is lost by the input, the background of the input becomes back to default?

import React from "react";
import sr from './Search.module.css';
import icon from './../../../../img/grey_search.svg';

class Search extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            'activeColor': "#224B7A"
        }
    }
    changeColor = () =>{
        this.setState({'activeColor': "#fff"})

    }
    render() {
        let bg = {backgroundColor: this.state.activeColor}
        return (
            <div className={sr.container} style={bg}>
                <div className={sr.search}>
                    <form action="#">
                        <div className={sr.wrapper__form}>
                            <div className={sr.form__icon}>
                                <img src={icon} alt="image"/>
                            </div>
                            <div className={sr.form__input}>
                                <input type="text" placeholder='Поиск'  onClick={this.changeColor}/>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        );
    }
}
export default Search;

Answer 1

.container {
  background: #224B7A;
}

.container.active {
  background: #fff;
}

state = {
  active: false,
}

toggleActive = ({ type }) => {
  this.setState(() => ({
    active: type === 'focus',
  }));
}

<div className={`container ${this.state.active ? 'active' : ''}`}>
  ...
  <input onFocus={this.toggleActive} onBlur={this.toggleActive} />