在反应中使用 document.classlist.remove

Question

当我点击一个新的 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

Answer 1

不要在 React 中使用通常的 DOM API 来做这样的事情，而是使用 React 的状态管理和条件渲染功能。您已经有一个状态变量来跟踪活动案例 (currentCase)，因此您可以在渲染时有条件地设置 class 名称。

对于每个 li，只需检查 currentCase 的值是否与 li 的值匹配，如果匹配，则将 li 赋给 class active，否则给一个不同的class。

例如：

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){
        setCurrentCase(Number(e.target.value));
    }

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

export default Anime

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

function getLiClassName(value) {
    if (value === currentCase) {
        return "active";
    }
    return "";
}

并像这样使用：

<li value={0} className={getLiClassName(0)} onClick={currentSelector}>
    Trending
</li>

在反应中使用 document.classlist.remove

Using document.classlist.remove in react

reactjs

jsx

dom-manipulation