代码之家 › 专栏 › 技术社区 › LOTUSMS

在react中映射数据时隔离函数

material-ui reactjs javascript

LOTUSMS · 技术社区 · 6 年前

我有数据被映射为中继器。但我需要把打开的功能分离出来(这是手风琴)。我还在学习如何应对。基本上,手风琴在 open: false 单击列表项后, HandleClick 函数将状态切换为 open: true . 一个简单的概念,我只需要隔离它,使它独立工作。而现在它们都是同时打开和关闭的。

以下是构造函数和函数中的状态

constructor(props) {
    super(props);
    this.state = {
        open: true,
    };
}

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

这是我在reactjs中的映射脚本

{LicenseItems.map((item, index) => (
    <div key={index}>
        <ListItem 
            divider 
            button
            onClick={this.handleClick}>
            <ListItemText primary={<CMLabel>{item.accordion_name}</CMLabel>}/>
        </ListItem> 
        <Collapse
            in={!this.state.open} 
            timeout="auto" 
            unmountOnExit>
            {item.content}
        </Collapse> 
    </div>
))}

这个 in 指示下一个物料是否打开

提前谢谢你们!

2 回复 | 直到 6 年前

Hinrich 6 年前

不是很漂亮,但像这样的东西应该管用:

constructor(props) {
    super(props);
    this.state = {
        open: {},
    };
}
handleClick = (idx) => {
  this.setState(state => ({open: { [idx]: !state.open[idx]} }))
}

// in render
{LicenseItems.map((item, index) => (
    <div key={index}>
        <ListItem 
            divider 
            button
            onClick={() => this.handleClick(index)}>
            <ListItemText primary={<CMLabel>{item.accordion_name}</CMLabel>}/>
        </ListItem> 
        <Collapse
            in={!this.state.open[index]} 
            timeout="auto" 
            unmountOnExit>
            {item.content}
        </Collapse> 
    </div>
))}

最好创建单独的组件,它们有自己的 open 状态。

Vishal 6 年前

您应该为此创建两个组件:

手风琴.js

import React from 'react'

import Accordion from './Accordion'

const Accordions = props => {
  return (
    props.LicenseItems.map((item, index) => (
      <Accordion key={index} item={item} />
    ))
  );
}

export default Accordions;

手风琴

import React, { Component } from 'react'

class Accordion extends Component {
  constructor(props) {
    super(props);
    this.state = {
        open: true,
    };
  }

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

  render() {
    return (
     <div>
        <ListItem 
            divider 
            button
            onClick={this.handleClick}>
            <ListItemText primary={<CMLabel>{this.props.item.accordion_name}</CMLabel>}/>
        </ListItem> 
        <Collapse
            in={!this.state.open} 
            timeout="auto" 
            unmountOnExit>
            {this.props.item.content}
        </Collapse> 
      </div>
    )
  }
}

export default Accordion;

推荐文章