Как изменить цвет при потере фокуса input?

Question

[Alex Ozerov]

В коде написал что при клике на input контейнер меняет background, а как сделать чтобы при потере фокуса инпутом, background инпута становился обратно дефолтным?

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

[0xD34F]

.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} />