1

Вопрос в следующем, имеется, допустим, 4 кнопки, при клике на кнопку текст в ней должен изменяться на "Открыто", сейчас же проблема в том, что если кликнуть на 1 кнопку, то текст изменится во всех кнопках, есть ли какое-нибудь элегантное решение для такой задачи? Никак не могу разобраться, спасибо.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    open: false
  };

  handleOpen = () => {
    this.setState({ open: !this.state.open });
  };

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

    return (
      <div>
        <button onClick={this.handleOpen}>
          {open ? "Открыто" : "Закрыто"}
        </button>
        <button onClick={this.handleOpen}>
          {open ? "Открыто" : "Закрыто"}
        </button>
        <button onClick={this.handleOpen}>
          {open ? "Открыто" : "Закрыто"}
        </button>
        <button onClick={this.handleOpen}>
          {open ? "Открыто" : "Закрыто"}
        </button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

1 ответ 1

0

Если у вас версия реакта 16.8.0 и выше, можно избавиться от классового компонента и использовать хук useState для менеджмента состояния кнопок:

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = () => {
  const [buttons, setButtons] = useState([
    { open: false },
    { open: false },
    { open: false },
    { open: false }
  ]);

  const handleOpen = id => {
    const newButtons = buttons;
    newButtons[id].open = !buttons[id].open;
    setButtons(newButtons);
  };

  return (
    <div>
      {buttons.map(({ open }, idx) => (
        <button key={idx} onClick={() => handleOpen(idx)}>
          {open ? 'Открыто' : 'Закрыто'}
        </button>
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Если не хотите переходить на последнюю версию реакта, то можно поступить следующим образом:

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  state = {
    buttons: [
      { open: false },
      { open: false },
      { open: false },
      { open: false }
    ]
  };

  handleOpen = id => {
    const { buttons } = this.state;
    buttons[id].open = !buttons[id].open;
    this.setState({ buttons });
  };

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

    return (
      <div>
        {buttons.map(({ open }, idx) => (
          <button key={idx} onClick={() => this.handleOpen(idx)}>
            {open ? 'Открыто' : 'Закрыто'}
          </button>
        ))}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

3
  • Что будете делать, если таких кнопок будет 50 штук? Для каждого прописывать open: false?
    – meine
    27 мар 2019 в 17:24
  • @meine разумеется можно использовать массив или объект. Пример решает другую проблему 😇 27 мар 2019 в 18:26
  • Всё же я думаю, что стоит не только решить задачу, но и "сделать задел на будущее".
    – meine
    27 мар 2019 в 18:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.