Как сделать проверку по state? (React)

Question

У меня есть классовый-компонент, который рендерит страницу. В нем есть компонент Btns, который формирует 2 кнопки на данной странице, которые между собой связаны (или одна активна кнопка или другая), а также на этой странице есть элемент input который в зависимости от состояния этих кнопок показывает или один текст, или другой.

В браузере, в devtool, в "Components", состояние этих кнопок (в зависимости, которая из них активна) меняется по графе state, поле active: 0 или active: 1 - Вопрос: как сделать проверку для элемента input (который следит за кнопками, какая из них активна)?

Answer 1

Состояние активности кнопки можно вынести в родительский компонент и передовать его в дочерний через props, так же как и функцию для обновления состояния. Получается примерно так:

import React, { Component } from "react";

export class App extends Component {
  state = {
    activeButton: "Button1",
  };

  updateActiveButton = (btn) => {
    this.setState({ activeButton: btn });
  };

  render() {
    const { activeButton } = this.state;

    return (
      <div>
        <div>
          <input value={`active button is: ${activeButton}`} />
        </div>
        <Btns
          activeButton={activeButton}
          updateActiveButton={this.updateActiveButton}
        />
      </div>
    );
  }
}

export default App;

const Btns = ({ activeButton, updateActiveButton }) => {
  const buttonHandler = (e) => {
    updateActiveButton(e.target.id);
  };

  const getStyle = (btn) => {
    return btn === activeButton ? { background: "red" } : {};
  };

  return (
    <>
      <button id="Button1" onClick={buttonHandler} style={getStyle("Button1")}>
        Button 1
      </button>
      <button id="Button2" onClick={buttonHandler} style={getStyle("Button2")}>
        Button 2
      </button>
    </>
  );
};

БЛОГ НА HUSL

Как сделать проверку по state? (React)

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