Как переключить класс элемента div, нажав на кнопку внутри другого функционального компонента (другого файла)? - PullRequest
Новая
       17

Как переключить класс элемента div, нажав на кнопку внутри другого функционального компонента (другого файла)?

0 голосов
/ 16 марта 2020

Я хочу переключить класс контейнера (файл 2) нажатием на кнопку, которая находится внутри другого файла компонента.

Кнопка уже имеет функцию onClick, и я хочу, чтобы она вызывала две функции. Две функции переключения для кнопки и два переключения класса для контейнера.

Надеюсь, что это имеет смысл.

Вот мой код:

Компонент кнопки (Файл 1) 

import React, {useState} from "react";
import "./Sort.scss";

const Sort = () => {

    const [toggleSortIcon, toggleSortIconSet] = useState(false);

    return (
        <div className="tools">
            <button 
            onClick={() => toggleSortIconSet(!toggleSortIcon)} 
            className={`sort ${toggleSortIcon ? "horizontal" : "vertical"}`}>
            </button>
        </div>
    );
}

export default Sort;

Компонент контейнера Div, для которого я хочу изменить класс (Файл 2)

image

1 Ответ

1 голос
/ 16 марта 2020

У вас может быть либо глобальная система управления состоянием (избыточная, либо с настраиваемыми хуками), которую вы можете использовать для хранения размера значка.

Или вы можете просто предоставить обратный вызов вашему компоненту, в котором хранится значок размер в родительском компоненте, который затем передает его обратно в что-то вроде этого: 

const [size, setSize] = useState(/* default value */);

render() {
  <>
    <Sort onSizeToggle={setSize} />
    <WordContainer size={size} />
  </>
}
...