在 tsx 中反应删除状态值 onClick

Question

我想过滤类别，如果我点击类别需要查看它们。如果我再次单击它们，我还需要删除它们。我将所有活动类别保存在一个状态中，并想在再次单击它们后删除它们，现在我的问题是如何以最聪明的方式做到这一点？状态：

const [activeCategories, setActiveCategories] = useState<string[]>([]);

function handleClick(catId: string) {
    setActiveCategories([...activeCategories, catId]);
}

使用 ActiveCategories 无法获取活动 ID。

Answer 1

修改handleClick函数，判断catId是否存在。如果存在则删除它，如果它不存在则添加它状态：

function handleClick(catId: string) {
    if(activeCategories.findIndex(id => catId === id) >= 0){
        const updateState = activeCategories.filter(id => id !== catId)
        setActiveCategories(updateState);
    } else {
        setActiveCategories([...activeCategories, catId]);
    }
}

在 tsx 中反应删除状态值 onClick

React in tsx delete state value onClick

reactjs

material-ui

tsx