Как в react делается переключение активного класса?

Question

Есть список кнопок, мне нужно сделать переключение, чтобы при выборе у прошлой кнопки уберался активный класс. В самом начале первая кнопка должна быть активна. Я знаю, что нужно это делать в стете, но стейт делать активным классом все кнопки.

Пример на react и javascript https://codesandbox.io/s/keen-wozniak-2mvdje?file=/src/App.js

Заранее спасибо!

Answer 1

Как я уже говорил в комментариях:

Создаём отдельный компонент, куда будем передавать функцию handleClick для обработки клика, булевую переменную isActive, которая будет отвечать за нужный нам класс элемента и строковую переменную text, который будет текстом наших кнопок
Создаём стейт, в котором будем хранить индекс активного элемента
Создаём массив arrayForButtons нужной длины, с помощью которого будем рисовать наши кнопки
Проходимся по этом массиву с помощью map и передаём все переменные в нужном формате, значения которых зависит от индекса i

Код:

const {useState} = React;
const {createRoot} = ReactDOM;

const MyButton = ({handleClick, isActive, text}) => {
  return (
    <div onClick={handleClick} className={`react-button ${isActive ? 'active' : ''}`}>
      {text}
    </div>
  )
}

function App() {
  const [activeIndex, setActiveIndex] = useState(0);
  const arrayForButtons = Array(3).fill(0);  

  const javaScript = (event) => {
    const el = event.target;

    document
      .querySelector(".javascript-button.active")
      .classList.remove("active");
    el.classList.add("active");
  };

  return (
    <div className="App">
      <div>
        <h1>React</h1>
        <div className="group-button-javascript">
          {
            arrayForButtons.map((_, i) =>
              <MyButton
                key={i}
                handleClick={() => setActiveIndex(i)}
                isActive={activeIndex === i}
                text={'Button ' + (i + 1)}
              />
            )
          }
        </div>
      </div>
      
      <div>
        <h1>JavaScript</h1>
        <div className="group-button-javascript">
          <div onClick={javaScript} className="javascript-button active">
            Button 1
          </div>
          <div onClick={javaScript} className="javascript-button">
            Button 2
          </div>
          <div onClick={javaScript} className="javascript-button">
            Button 3
          </div>
        </div>
      </div>

    </div>
  );
}

// Rendering

const container = document.querySelector('#root');
const root = createRoot(container);
root.render(<App />)

.App {
  display: flex;
  gap: 5rem;
  justify-content: center;
  font-family: sans-serif;
  text-align: center;
}

.javascript-button {
  width: fit-content;
  border: 1px solid #ffaa22;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.react-button {
  width: fit-content;
  border: 1px solid #bbffdd;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.javascript-button.active {
  background-color: #ffaa22;
}

.react-button.active {
  background-color: #bbffdd;
}

.group-button-javascript > *,
.group-button-react > * {
  margin: 0 auto 1rem auto;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

Answer 2

Как в react делается переключение активного класса?

Применительно к твоему примеру можно предложить нечто такое...

function App() {
  const [btn, setBtn] = React.useState([true, false, false]);

  const javaScript = (event) => {
    const el = event.target;

    document
      .querySelector(".javascript-button.active")
      .classList.remove("active");
    el.classList.add("active");
  };

  const react = (n) => {
    setBtn(old => old.map((v, i) => i === n));
  };


  return (
    <div className="App">
      <div>
        <h1>React</h1>
        <div className="group-button-react">
          {btn.map((v, i) => <Btn key={i} act={v} i={i} click={react} />)}
        </div>
      </div>

      <div>
        <h1>JavaScript</h1>
        <div className="group-button-javascript">
          <div onClick={javaScript} className="javascript-button active">
            Button 1
          </div>
          <div onClick={javaScript} className="javascript-button">
            Button 2
          </div>
          <div onClick={javaScript} className="javascript-button">
            Button 3
          </div>
        </div>
      </div>
    </div>
  );
}
//
function Btn(props) {
  const {act, i, click} = props
  let cls = ['react-button']
  if (act) cls.push('active')
  cls = cls.join(' ')
  return <div onClick={_ => click(i)} className={cls}>
    Button {i}
  </div>

}
const root = ReactDOM.createRoot(document.querySelector('#like_button_container'));
root.render(<App />);

.App {
  display: flex;
  gap: 5rem;
  justify-content: center;
  font-family: sans-serif;
  text-align: center;
}

.javascript-button {
  width: fit-content;
  border: 1px solid #ffaa22;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.react-button {
  width: fit-content;
  border: 1px solid #bbffdd;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.javascript-button.active {
  background-color: #ffaa22;
}

.react-button.active {
  background-color: #bbffdd;
}

.group-button-javascript > *,
.group-button-react > * {
  margin: 0 auto 1rem auto;
}

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<div id="like_button_container"></div>

БЛОГ НА HUSL

Как в react делается переключение активного класса?

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