在函数 React 组件中切换 CSS 样式答案

【问题标题】：Toggle CSS style in a function React component在函数 React 组件中切换 CSS 样式
【发布时间】：2021-01-10 06:32:25
【问题描述】：

关于如何在 React 中切换 css 的每篇文章或教程都假设我使用的是类组件。但是，我使用的是函数组件，无法访问this 和state。谁能告诉我如何在 React 函数组件中切换 JSX 元素的 CSS 样式？

import React from 'react';
import { Row, Container, Col } from 'react-bootstrap';

const FilterBar = ( {eventFilters, setEventFilters} ) => {
  

  const someFunction = () => {
      // code in here
  }  

  return(
    <div className="row-fluid" >
      <Container fluid >
        <Row className="justify-content-md-center mb-2 mt-2">
          <Col onClick={someFunction}> <button value="ALL"> All </button> </Col>   
          <Col onClick={someFunction}> <button value="WORKSHOP"> Workshop </button> </Col>        
          <Col onClick={someFunction}> <button value="MINIEVENT"> Minievent </button> </Col>        
        </Row>
        <Row className="justify-content-md-center mb-2">  
          <Col onClick={someFunction}> <button value="SPEAKER"> Speaker </button></Col>
          <Col onClick={someFunction}> <button value="MEAL"> Meal </button> </Col>
          <Col onClick={someFunction}> <button value="OTHER"> Other </button> </Col>     
        </Row>
      </Container>
    </div>
  );
}

export default FilterBar;

【问题讨论】：

您确实意识到功能组件仍然可以是有状态的，对吧？您是否有尝试切换某些状态以设置样式/CSS 的示例（即您需要切换的状态以及您尝试使用的 CSS）？
这能回答你的问题吗？ Toggle css class in React
@Drew Reese，抱歉，我是新手。我正在尝试在每个按钮元素单击时为每个按钮元素添加一种样式，该样式仅在文本中添加了一行。每当我在我的代码中添加this 时，它都会说它是未定义的。
如果你想在一个功能组件内部管理状态，你应该使用 React Hooks。

标签： javascript css reactjs

【解决方案1】：

通过点击事件对象切换一些样式。您可以使用事件目标样式属性将当前的textDecoration 属性更改为“line-through”或无（“”）。

const toggleStrikethrough = (e) => {
  e.target.style.textDecoration =
    e.target.style.textDecoration === "line-through" ? "" : "line-through";
};

function App() {
  const toggleStrikethrough = (e) => {
    e.target.style.textDecoration =
      e.target.style.textDecoration === "line-through" ? "" : "line-through";
  };

  return (
    <div className="App">
      <div onClick={toggleStrikethrough}>ALL</div>
      <div onClick={toggleStrikethrough}>WORKSHOP</div>
      <div onClick={toggleStrikethrough}>MINIEVENT</div>
      <div onClick={toggleStrikethrough}>SPEAKER</div>
      <div onClick={toggleStrikethrough}>MEAL</div>
      <div onClick={toggleStrikethrough}>OTHER</div>
    </div>
  );
}

注意：这通常是不受欢迎的，因为您直接操作 DOM，所以这被认为是一种反模式。更好和更反应的方法是在本地组件状态中为您想要切换样式（或任何真正）的每个元素保持切换的“状态”。

【讨论】：