主页 / 问题 / 1317782
Accepted
Cobra777
Asked:2022-08-15 15:41:18 +0000 UTC2022-08-15 15:41:18 +0000 UTC

如何根据按钮的状态（React）向元素添加类？

  • 772

有一个功能成分卡路里。它有 3 个组件。第一个 - Btns - 呈现 2 个按钮（其中一个是活动的），第二个和第三个组件 - 呈现表格。

更改按钮状态时如何将显示类添加到第 2 和第 3 个组件？

export default function Calories() {
  return ( <
    section id = 'сalories' >
      <Btns items = {['male', 'female']}/> 
      <table id = 'table-men' className = { ... ? 'bw show' : 'bw' } >
       ...
      </table> 
      <table id = 'table-women' className = { ... ? 'bw show' : 'bw' } >
       ...
      </table> 
    </section>
  );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

reactjs

1 个回答

  1. Best Answer

    如果可以帮助和/或评估提交的答案，我将很高兴收到反馈

    import React, { useState, useCallback, memo } from "react";

/* #region Btns Component */
interface BtnsProps {
  items?: string[];
  onClick: (
    buttonType: string
  ) => (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}

const Btns = memo((props: BtnsProps) => {
  const { items, onClick } = props;

  if (!items) return null;

  return (
    <>
      {items.map((id) => (
        <button key={id} onClick={onClick(id)}>
          {id}
        </button>
      ))}
    </>
  );
});
/* #endregion */

/* #region Table Component */
interface TableProps {
  id: string;
  isActive?: boolean;
}

/** Компонент отрисовки данных */
const Table = memo((props: TableProps) => {
  const { id, isActive } = props;

  return (
    <table id={`table-${id}`} className={isActive ? "bw show" : "bw"}>
      <tbody>
        <tr>
          <td>
            ... {id}: {isActive ? "bw show" : "bw"}
          </td>
        </tr>
      </tbody>
    </table>
  );
});
/* #endregion */

/* #region Calories Component */
interface CaloriesProps {
  /** Словарь кнопок */
  buttons?: string[];
}

/** Хук хранения данных и обработки событий */
const useDataCalories = (props: CaloriesProps) => {
  const { buttons } = props;

  /** Состояние компонента */
  const [activeButton, setActiveButton] = useState(buttons?.[0]);

  /**
   * Обработчик события click по кнопке
   * @remark useCallback нужен потому что обработчик прокидывается в дочерний компонент
   */
  const handleClick = useCallback(
    (buttonType: string) =>
      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        event.preventDefault();
        if (buttonType === activeButton) return;
        setActiveButton(buttonType);
      },
    [activeButton]
  );

  return { buttons, activeButton, handleClick };
};

function Calories(props: CaloriesProps) {
  const { buttons, activeButton, handleClick } = useDataCalories(props);

  return (
    <section id="сalories">
      <Btns items={buttons} onClick={handleClick} />
      {buttons?.map((id) => (
        <Table key={id} id={id} isActive={id === activeButton} />
      ))}
    </section>
  );
}

Calories.defaultProps = {
  buttons: ["male", "female"],
};
/* #endregion */

export default Calories;
    • 0

相关问题