Открыть конкретный блок, react

142
20 декабря 2019, 14:10

Вопрос в следующем, имеется, допустим, 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);

Answer 1

Если у вас версия реакта 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);

READ ALSO
Пропадает результат AJAX
javascript

Пропадает результат AJAX

Имеется код:

 144
Сделать выборку в таблице через внешний ключ
MySQL

Сделать выборку в таблице через внешний ключ

Есть две таблицы:

 147
com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown column &#39;username&#39; in &#39;where clause&#39;
MySQL

com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown column 'username' in 'where clause'

Не могу понять в чем проблема Есть таблица, В ней есть usergroupid и username

 150
Не работает класс form-inline
HTML

Не работает класс form-inline

Пытаюсь сделать в навбаре горизонтальную формуВ документации Bootstrap 4 указано что можно использовать класс form-inline, я пробую, но никак не получается,...

 146