Reactjs 在react中使用document.classlist.remove

当我单击一个新的li标记时，我希望类名更改为active（有效），但同时从其余的li标记中删除active（无效）。document.getElementByTagName（'li'）.classList.remove=“active”不起作用，因为它说它没有定义。我应该用另一种方式来解决这个问题吗。。。也许在州里储存一些不同的东西

import React, {useState, useEffect} from 'react';
import './Anime.css';

function Anime(){
    const [currentCase, setCurrentCase] = useState(0)
    function getAnime(){
        fetch('https://kitsu.io/api/edge/anime')
        .then(response => response.json())
        .then(data => console.log(data));
    }

    function currentSelector(e){
        document.getElementsByTagName('li').clasList.remove("active");
        setCurrentCase(e.target.value)
        e.target.className = "active" 
    }

    useEffect(() => {
        getAnime();
      }, []);
    
    return(
        <div className="anime">
            {/* Selectors */}
            <ul>
                <li value= {0} className="active" onClick={currentSelector}>Trending</li>
                <li value={1} onClick={currentSelector}>Action</li>
                <li value={2} onClick={currentSelector}>Adventure</li>
                <li value={3} onClick={currentSelector}>Comedy</li>
                <li value={4} onClick={currentSelector}>Drama</li>
                <li value={5} onClick={currentSelector}>Magic</li>
                <li value={6} onClick={currentSelector}>Romance</li>
            </ul>
            
        </div>
    )
}

export default Anime

import React，{useState，useffect}来自“React”；
导入“/Anime.css”；
功能动画（）{
常量[currentCase，setCurrentCase]=useState（0）
函数getAnime（）{
取（'https://kitsu.io/api/edge/anime')
.then（response=>response.json（））
.then（data=>console.log（data））；
}
功能电流选择器（e）{
document.getElementsByTagName（'li'）.clasList.remove（“活动”）；
setCurrentCase（如目标值）
e、 target.className=“活动”
}
useffect（（）=>{
getAnime（）；
}, []);
返回(
{/*选择器*/}

趋势分析
操作



Magic


)
}
导出默认动画

在React中，不要使用常见的DOM API处理类似的事情，而是使用React的状态管理和条件呈现功能。您已经有一个状态变量来跟踪活动案例（

currentCase

），因此您可以在呈现时有条件地设置类名

对于每个

li

，只需检查

currentCase

的值是否与该

li

的值匹配，如果匹配，则为该

li

指定活动的

类，否则指定不同的类

例如：

import React，{useState，useffect}来自“React”；
导入“/Anime.css”；
功能动画（）{
常量[currentCase，setCurrentCase]=useState（0）
函数getAnime（）{
取（'https://kitsu.io/api/edge/anime')
.then（response=>response.json（））
.then（data=>console.log（data））；
}
功能电流选择器（e）{
setCurrentCase（数字（如目标值））；
}
useffect（（）=>{
getAnime（）；
}, []);
返回(
{/*选择器*/}


趋向


行动


冒险


喜剧片


戏剧


魔术


浪漫


)
}
导出默认动画

或者将类名逻辑提取到函数中（在
Anime
组件中定义），并为每个
li
元素调用该函数：

函数getLiClassName（值）{
如果（值===currentCase）{
返回“活动”；
}
返回“”；
}

然后像这样使用：


趋向

您似乎有输入错误
clasList
应该有2个“s”。请在您提供的代码段中进行比较。另外，为什么要使用常规的domapi而不是在React的API中处理这个问题呢？我写了一个非常类似的答案，这种方法就是解决这个问题的方法。如果您想简化代码，而不是提取<代码> GETLILASSANEX/COD>函数，请考虑创建可用选择器的数组，并使用<代码> .MAP>代码>生成<代码> 
 < /代码>。那么您只需要写一次案例检查：）