Question

我将数据映射为转发器。但我需要隔离开场功能（它是一个手风琴）。我还在通过React学习。基本上，手风琴加载open: false的状态一旦单击ListItem，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指示每个MaterialUI-Next

是否打开

先谢谢你们！

Answer 1

不是很漂亮，但这样的事情应该有效：

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状态。

Answer 2

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

Accordions.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;

Accordion.js

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;

在反应中映射数据时隔离函数

2 个答案: