材质 UI 更改 ItemList 中单个项目的 onClick 状态

Question

来自材质 UI 的选定道具存在问题。我试图在从我的列表中单击时选择一个项目，但现在当我单击任何项​​目时，它们都会“被选中”。

希望这很清楚。

import React, { useState } from 'react';
import {
    ListItem,
    ListItemIcon,
    List,
} from '@material-ui/core';
import navLinks from 'components/navLinks';
import { Link } from 'react-router-dom';


const simpleList= () => {
    const [select, setSelect] = useState(false);

    const setActive = () => {
        setSelect(true);
    };

    return (
        <List>
            {navLinks.map((item) => (
                <div
                    key={item.id}
                >
                    <Link
                        className="simple-menu-link"
                        to={item.url}
                    >
                        <ListItem
                            button
                            key={item.id}
                            selected={select}
                            onClick={(e) => { setActive(e); }}
                        >
                            <ListItemIcon>
                                {item.icon}
                            </ListItemIcon>
                        </ListItem>
                    </Link>
                </div>
            ))}
        </List>
    );
};

export default simpleList;

Answer 1

在这种情况下，每个ListItem 都从select 状态读取。这样，如果select 是true，则选择所有ListItem。如果是假的也一样。

由于您只需要选择一个ListItem，因此您可以将特定ListItem 的索引存储在状态中。

试试这样的：

import React, { useState } from 'react';
import {
    ListItem,
    ListItemIcon,
    List,
} from '@material-ui/core';
import navLinks from 'components/navLinks';
import { Link } from 'react-router-dom';


const simpleList= () => {
    // setting initial index as null so that nothing is selected.
    // If you want first index to be selected, set initial state as 0
    const [selectedIndex, setSelectedIndex] = useState(null);

    const setActive = (index) => {
        setSelectedIndex(index);
    };

    return (
        <List>
            {navLinks.map((item, index) => (
                <div
                    key={item.id}
                >
                    <Link
                        className="simple-menu-link"
                        to={item.url}
                    >
                        <ListItem
                            button
                            key={item.id}
                            selected={index === selectedIndex}
                            onClick={() => { setActive(index); }}
                        >
                            <ListItemIcon>
                                {item.icon}
                            </ListItemIcon>
                        </ListItem>
                    </Link>
                </div>
            ))}
        </List>
    );
};

export default simpleList;