изменение состояния в определенном / выбранном массиве при отображении массива - PullRequest
Новая
       9

изменение состояния в определенном / выбранном массиве при отображении массива

0 голосов
/ 17 января 2019

Как правильно использовать состояние в отображении массива

Я бы хотел отобразить массив данных. На каждом предмете у меня есть Menu и MenuItem из material-ui. Я использую метод, чтобы открыть меню путем изменения состояния. Но, если я использую только одно состояние, тогда будет открыто все меню, потому что для открытия меню в каждом массиве я использую только this.state.open. Вы знаете, как сделать меню открытым только на массиве желаний? Спасибо за любую помощь.

вот что я сделал до сих пор. 

import React, { Component } from 'react'
import Menu from '@material-ui/core/Menu'
import MenuItem from '@material-ui/core/MenuItem'

const dataMap = [
    {
        id: 1,
        name: "john"
    }, {
        id: 2,
        name: "Doe"
    }
]

export default class MyComponent extends Component {

    state = {
        open: false
    }

    handleClick() {
        this.setState({
            open: !this.state.open
        })
    }

    render() {
        const mapResult = dataMap.map((item, index) => {
            const id = item.id;
            const name = item.name;
            return <span key={index}>
                {name}
                <Menu
                    open={this.state.open}
                >
                    <MenuItem id={id}>First</MenuItem>
                    <MenuItem id={id}>Second</MenuItem>
                    <MenuItem id={id}>Third</MenuItem>
                </Menu>
            </span>
        })
        return (
            <div>
                {mapResult}
            </div>
        )
    }
}

Ожидаемый результат: Только одно меню открыто одновременно в выбранном индексе.

1 Ответ

0 голосов
/ 17 января 2019

Вы можете использовать идентификатор данных в качестве состояния вместо логического значения (например, openedMenuId) 

import React, { Component } from 'react'
import Menu from '@material-ui/core/Menu'
import MenuItem from '@material-ui/core/MenuItem'

const dataMap = [
    {
        id: 1,
        name: "john"
    }, {
        id: 2,
        name: "Doe"
    }
]

export default class MyComponent extends Component {

    state = {
        openedMenuId: null
    }

    handleClick(newOpenedMenuId) {
        this.setState({
            openedMenuId: newOpenedMenuId
        })
    }

    render() {
        const mapResult = dataMap.map((item, index) => {
            const id = item.id;
            const name = item.name;
            return <span key={index}>
                {name}
                <Menu
                    open={this.state.openedMenuId === item.id}
                >
                    <MenuItem id={id}>First</MenuItem>
                    <MenuItem id={id}>Second</MenuItem>
                    <MenuItem id={id}>Third</MenuItem>
                </Menu>
            </span>
        })
        return (
            <div>
                {mapResult}
            </div>
        )
    }
}
...