物质用户界面在点击ItemList中的单个项目时改变状态。

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;