@ozerovlife
Front-end Developer

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

В коде написал что при клике на 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;
  • Вопрос задан
  • 40 просмотров
Решения вопроса 1
0xD34F
@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} />
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы