當用戶在 react.s 中選擇來自 api 的列表項時，如何切換 class？

Question

我正在開發一個應用程序，在該應用程序中，我通過使用 map 方法循環呈現數據庫結果。 當用戶點擊每個項目時，首先它會將這些 id 添加到一個數組中並切換 CSS class 以更改特定選定項目的邊框顏色，當再次選擇該項目時，邊框將消失，所有項目都一樣在 UI 中呈現。 將 id 添加到數組中工作正常。

單擊每個項目時，我在切換 CSS 樣式以更改邊框顏色時遇到問題。

這是我在 DOM 上渲染項目的代碼

const [selectedItems, setSelectedItems] = React.useState([])

const onClickHandler = (id) => {
    if (selectedItems.indexOf(id) > -1) {
        let updatedItems = selectedItems.filter(itemID => itemID !== id)
        console.log(updatedItems);
        setSelectedItems(updatedItems)
    } else {
        setSelectedItems(prevState => [...prevState, id] )
    }
    setOpen(true);
}
    
{
    courses.length > 0 && courses.map(course => {
        return (
            <>
                <CourseItem course={course} onClickHandler={onClickHandler} itemSelect={itemSelect} />
            </>
        )
    })
}

function CourseItem({ course, onClickHandler }) {
    const classes = useStyles();
    return (
        <>
             <Col style={{ marginTop: 10 }}>
                    <Paper elevation={0}  className={classes.card}>
                        <div className={classes.cardTop} style={{  backgroundImage: `url('${course.thumbnail}')`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
                            <div style={{ padding: '8px 18px', display: 'flex', justifyContent : 'space-between' }}>
                                <CheckCircleIcon  onClick={() => onClickHandler(course._id)} />
                                {/* <Typography component={"label"} variant="caption"> { course.level }</Typography> */}
                                    <Chip label={course.level} style={{ color: '#000', backgroundColor: '#f9f9f9', fontFamily: 'regular1', position: 'relative', zIndex: 0}} variant="outlined" />
                            </div>
                        </div>
                        <div className={classes.cardBottom}>
                            <Typography> { course.moduleName }</Typography>
                            <Typography variant="subtitle2" component={"span"}> { course.description }</Typography>
                        </div>
                    </Paper>
             </Col>
        </>
    )
}

Answer 1

對於兩種不同的情況，您可以使用兩個不同的 class。 然后用clsx有條件的申請class。

clsx 鏈接 -> npm clsx