Изменение пользовательского интерфейса материала onClick отдельного элемента из ItemList - PullRequest
Новая
       9

Изменение пользовательского интерфейса материала onClick отдельного элемента из ItemList

0 голосов
/ 23 апреля 2020

Возникла проблема с выбранным реквизитом из пользовательского интерфейса материала. Я пытаюсь выбрать один элемент при нажатии из моего списка, но сейчас, когда я нажимаю на любой из элементов, оба они go "selected".

Надеюсь, это вполне понятно. 

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;

1 Ответ

2 голосов
/ 23 апреля 2020

В этом случае каждый 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;
...