Обращение к объекту класса

Question

class Main extends React.Component {
            login() {
                alert("Войти");
            }
            forgotPassword() {
                alert("Забыли пароль");
            }
            render() {
                return (
                    <div className="LoginForm">
                        <div className="TextForm">
                            <text className="Text">Логин</text>
                            <p><input className="Email" type="email" ref="Email"></input></p>
                        </div>
                        <button onClick={this.forgotPassword}>Забыли пароль?</button>
                        <button onClick={this.login}>Войти</button>
                    </div>);
            }
        };

 .TextForm {
            /*background-color: #000000;*/
            border: solid 1px;
            width: 20vW;
            height: 5vH;
        }
        .Email {
            outline:none;
            border: solid 0px;
        }
        .Email:focus text {
            background-color: red;
        }

Как обратиться к объекту, чтобы изменить стили другого объекта? Чтобы например если нажимаешь на input, то менялся цвет всего блока TextForm.

Answer 1

При нажатии на input к классу TextForm добавляется bgRed и цвет всего блока TextForm меняется, а если убрать курсор с input, то класс bgRed убирается.

class Main extends React.Component {
  
  state = {
    background: false,
  }
  focus = () =>{
    this.setState({
      background: true
    })
  }

  blur = () =>{
    this.setState({
      background: false
    })
  }

  render() {
    debugger;
      return (
          <div className='LoginForm'>
              <div className = {`TextForm ${this.state.background && 'bgRed'}`}>
                  <text className='Text'>Логин</text>
                  <p><input className='Email' type="email" ref="Email" onFocus={this.focus} onBlur={this.blur} ></input></p>
              </div>
              <button>Забыли пароль?</button>
              <button>Войти</button>
          </div>);
  }
};

.TextForm {
  /* background-color: #000000; */
  border: solid 1px;
  width: 20vW;
  
}
.Email {
  outline:none;
  border: solid 0px;
}

.bgRed{
  background-color: red;
}

БЛОГ НА HUSL

Обращение к объекту класса

Ответы (1 шт):