Question

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

我想映射一个数据数组。在每个项目上，我都有material-ui中的Menu和MenuItem。我通过更改状态来处理打开菜单的方法。但是，如果我只使用一种状态，那么所有菜单都会打开，因为要打开每个阵列上的菜单，我只会使用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>
        )
    }
}

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

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

进行数组映射时更改特定/选定数组中的状态

1 个答案: