进行数组映射时更改 certain/selected 数组中的状态

Question

数组映射中状态的正确使用方法是什么

我想映射一组数据。在每个项目上，我都有一个来自 material-ui 的 Menu 和 MenuItem。我处理通过更改状态打开菜单的方法。但是，如果我只使用一种状态，那么所有菜单都会打开，因为打开每个数组上的菜单我只使用 this.state.open。你知道如何让 Menu 只在 desire 数组上打开吗？感谢您的帮助。

这是我到目前为止所做的。

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>
        )
    }
}

预期结果：所选索引中一次只能打开一个菜单。

Answer 1

您可以使用数据 ID 作为状态而不是布尔值（例如 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>
        )
    }
}

进行数组映射时更改 certain/selected 数组中的状态

changing state in certain/selected array when doing array mapping

array-map

reactjs

material-ui