时间戳

首页 > 解决方案 > ReactJS：按钮（跨度）视觉应该在单击时重新渲染和更改，但不会（使用 setState）

javascript - ReactJS：按钮（跨度）视觉应该在单击时重新渲染和更改，但不会（使用 setState）

问题描述

我是一名年轻的开发人员，正在尝试使用 reactjs 创建我的第一个网站，并致力于自定义导航栏。我想要我在导航栏中按下的按钮，一旦按下就改变颜色，而所有其他按钮保持相同的颜色，但我的代码似乎不起作用。我正在使用 useState 来控制按钮的类名（视觉效果）的值。我的代码：

import React, { useState } from 'react';
import { Container, Col, Row, Button } from 'react-bootstrap';
import { Link, useHistory } from 'react-router-dom';
import '../App.css';

const NavButtons = () => {

    const [navbuttons, setnavbuttons] = useState([
        {id: 0, urlAdd: "/", name: "FORSIDE", show: "navlit"},
        {id: 1, urlAdd: "/priser", name: "PRISER", show: "navlif"},
        {id: 2, urlAdd: "/tilmeldning", name: "TILDMELDING", show: "navlif"},
        {id: 3, urlAdd: "/kontakt", name: "KONTAKT", show: "navlif"},
        {id: 4, urlAdd: "/faq", name: "FAQ", show: "navlif"}
    ]);

    let handleChange = index => {
        let currentbuttons = navbuttons;
        for(let i=0; i<currentbuttons.length; i++){
            currentbuttons[i].show = i == index? "natlit":"natlif";
        }
        setnavbuttons(currentbuttons);
        console.log(currentbuttons[index].show)
    }

    let history = useHistory();

    return(
        <div>
            <div className="navul">
            {navbuttons.map(navbut => 
                <span 
                    className={navbut.show}
                    onClick={() => {
                        handleChange(navbut.id);
                        history.push(navbut.urlAdd);
                    }}
                    ><p/>{navbut.name}
                </span>)
                }
            </div>
        </div>
    );
}

export default NavButtons;

当我按下按钮时，状态会发生变化，但按钮似乎没有重新呈现。如果你能告诉我我做错了什么，将不胜感激。

标签： javascriptreactjs

解决方案

需要修复 handleChange 以便它不会更改现有状态，而是在旧状态的位置添加新对象。

let handleChange = index => {
    let currentbuttons = [...navbuttons];
    for(let i=0; i<currentbuttons.length; i++){
        currentbuttons[i] = {...currentbuttons[i], show: i === index? "natlit":"natlif"};
    }
    setnavbuttons(currentbuttons);
}

推荐阅读