Question

我想点击它打开一个特定的部分。如何通过使用点击事件来做到这一点？如果我点击另一支手风琴，也会自动关闭剩下的手风琴。这是我的代码。

手风琴组件

import React, { Component } from 'react';

import Section from './section';

class Accordion extends Component {

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            open: false,
            headingClassName: 'accordion-heading',
            className: 'accordion-content accordion-close',
            Label: 'label-close',
            icon: "+",
            selectedItem: null,
        };
    }

    handleClick = () => {

        const open = this.state.open;
        if (open) {
            this.setState({
                open: false,
                className: "accordion-content accordion-close",
                headingClassName: "accordion-heading",
                Label: 'label-close',
                icon: "+",

            })
        } else {
            this.setState({
                open: true,
                className: "accordion-content accordion-open",
                headingClassName: "accordion-heading clicked",
                Label: 'label-open',
                icon: "-",
            })
        }
    }

    render() {
        return (
            <div className="accordion-container">
                <h1>Accordian Component</h1>

如何在onClick事件的每个部分中传递id作为参数来打开特别是手风琴和自动关闭。

     <Section>
                    <div className={this.state.headingClassName} onClick={this.handleClick} id="1">
                        <h3>One</h3> <label className={this.state.Label}>{this.state.icon}</label>
                    </div>
                    <div className={this.state.className}>
                        <p>This is paragraph</p>
                    </div>
                </Section>
                <Section>
                    <div className={this.state.headingClassName} onClick={this.handleClick} id="2">
                        <h3>Two</h3> <label className={this.state.Label}>{this.state.icon}</label>
                    </div>
                    <div className={this.state.className}>
                        <p>This is paragraph</p>
                    </div>
                </Section>
                <Section>
                    <div className={this.state.headingClassName} onClick={this.handleClick} id="3">
                        <h3>Three</h3> <label className={this.state.Label}>{this.state.icon}</label>
                    </div>
                    <div className={this.state.className}>
                        <p>This is paragraph</p>
                    </div>
                </Section>
            </div>
        );
    }
}

export default Accordion;

部分组件

import React, { Component } from 'react';

class Section extends Component {

    render() {
        return (
            <div className="parent-accordion"> 
                {this.props.children}           
            </div>
        );
    }
}

export default Section;

CSS

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.accordion-container {
  margin: auto;
  width: 700px;
}

.accordion-container h1 {
  color: #0000007a;
  text-align: center;
  font-family: sans-serif;
}

.parent-accordion {
  width: 100%;
  border: 1.5px solid #00000017;
}

.accordion-heading {
  padding: 5px 5px;
  background-color: #e2e2e254;
  cursor: pointer;
  text-transform: capitalize;
  /* font-size: 17px; */
  /* font-weight: 600; */
  color: #2b2b41;
  /* font-family: sans-serif; */
  transition: background-color 1s;
}

.accordion-heading:hover {
  background-color: #000000c7;
  color: white;

Answer 1

首先，我提供了一个最小（无css）示例，说明手风琴在代码盒上的行为here。

这可以通过多种方式完成。在上面的示例中，如果标签未处于活动状态，则tab的正文会隐藏display:none。基本上，您会在render函数中迭代数据以及您所在的位置根据你想要的任何标志设置你的类（在你的情况下isActive）。您可以为每个选项卡渲染一个Section并将props传递给它。

点击处理程序使用活动标签的ID更新您的状态。

如何在reactjs中打开特定的基于手风琴的点击事件并自动关闭剩余的手风琴？

1 个答案: