每篇关于如何在 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;
叮当猫咪
相关分类