手机上的ReactJs onClick

问题描述

我对ReactJs很陌生，并试图创建一个简单的菜单栏。 我的菜单可以在笔记本电脑上使用，但在移动设备上不会更改活动菜单的颜色。 如果将菜单项直接放置在render（）中，则它可以工作（请参阅“工作”菜单项），但是我的原始想法并没有改变手机上的菜单背景。 我不知道为什么。 谢谢您的阅读。

import React,{Component} from 'react'
import './menu-main.sass';
import {
    browserRouter as Router,Switch,Route,Link
}   from "react-router-dom";

const MenuButton = (props) => {
    return (
        <li className={props.className} onClick={props.onClick}>
            <Link to={'/' + props.route}>{props.name}</Link>
        </li>
    );
}

const menus = [
    {id: 0,name: 'Products',route: 'products'},{id: 1,name: 'Categories',route: 'category'},{id: 2,name: 'About',route: 'about'},]

class Menu extends Component {
    constructor(){
        super();
        this.state = {
            activeMenu: 0,}       
    }

    handleClick(i) {
        this.setState({
            activeMenu: i 
        })
    }

    renderMenuButton(i) {
        let className = "button"
        
        if (this.state.activeMenu == i) {
            className = "active-menu"
        } 
                
        return (
            <MenuButton 
                key = {menus[i].id}
                name = {menus[i].name}
                route = {menus[i].route}
                id = {menus[i].id}
                onClick={() => this.handleClick(i)}
                className = {className}
            />
        );
    }
    
    renderSwitch(i) {
        return (
            <Route path = {menus[i].route} key = {menus[i].id}>
                {'<' + menus[i].route + ' />'}
            </Route>
        );
    }
    
    render() {
        return (
            <Router>
                <div className="container-menu-main">
                    <ul>
                        <li>Admin menu</li>
                        <li onClick={() => this.handleClick(2)}>WORKING!!!</li>
                        {menus.map((menu) => this.renderMenuButton(menu.id))} {/* DOES NOT WORK */}
                    </ul>
                    <Switch>
                        {menus.map((menu) => this.renderSwitch(menu.id))}
                    </Switch>                   
                </div>
            </Router>
        )
    }
    
}

export default Menu;

解决方法

您正在将menu.id传递给this.renderMenuButton，但是看起来this.renderMenuButton希望有一个索引。你可以尝试一下吗？

import React,{Component} from 'react'
import './menu-main.sass';
import {
    BrowserRouter as Router,Switch,Route,Link
}   from "react-router-dom";

const MenuButton = (props) => {
    return (
        <li className={props.className} onClick={props.onClick}>
            <Link to={'/' + props.route}>{props.name}</Link>
        </li>
    );
}

const menus = [
    {id: 0,name: 'Products',route: 'products'},{id: 1,name: 'Categories',route: 'category'},{id: 2,name: 'About',route: 'about'},]

class Menu extends Component {
    constructor(){
        super();
        this.state = {
            activeMenu: 0,}       
    }

    handleClick(i) {
        this.setState({
            activeMenu: i 
        })
    }

    renderMenuButton(i) {
        let className = "button"
        
        if (this.state.activeMenu == i) {
            className = "active-menu"
        } 
                
        return (
            <MenuButton 
                key = {menus[i].id}
                name = {menus[i].name}
                route = {menus[i].route}
                id = {menus[i].id}
                onClick={() => this.handleClick(i)}
                className = {className}
            />
        );
    }
    
    renderSwitch(i) {
        return (
            <Route path = {menus[i].route} key = {menus[i].id}>
                {'<' + menus[i].route + ' />'}
            </Route>
        );
    }
    
    render() {
        return (
            <Router>
                <div className="container-menu-main">
                    <ul>
                        <li>Admin menu</li>
                        <li onClick={() => this.handleClick(2)}>WORKING!!!</li>
                        {menus.map((menu,i) => this.renderMenuButton(i))} {/* Pass index instead of menu.id */}
                    </ul>
                    <Switch>
                        {menus.map((menu) => this.renderSwitch(menu.id))}
                    </Switch>                   
                </div>
            </Router>
        )
    }
    
}

export default Menu;

,

我发现CSS存在宽度问题。在移动设备上，活动颜色将是：hover颜色，如果我删除了悬停颜色或将其设置为活动颜色，则可以正常工作。我不知道为什么，对此我也不满意，因为我听不懂。

另一方面，我意识到，React路由器中有一个用于活动链接的内置解决方案，因此我不需要管理自己。