Question

我想在单独的卡片中显示几种不同类型的信息。单击页眉时，每张卡都需要能够打开和关闭。

到目前为止，我编写了这段代码：

import React, { Component } from 'react';
import { PropTypes } from 'prop-types';

// Importing Styles
import './styles.scss';

class CardToggle extends Component {
  static propTypes = {
    title: PropTypes.string.isRequired
  };

  constructor(props) {
    super(props);

    this.state = {
      isOpen: false
    };

    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick = () => {
    this.setState({
      isOpen: !isOpen
    });
  };

  render() {
    const { title } = this.props;
    return (
      <div className="card my-2 border-0 rounded-0">
        <div className="card-body d-flex">
          <h4>
            <a className="text-secondary" href="">
              {title}
            </a>
          </h4>
        </div>
      </div>
    );
  }
}

export default CardToggle;

我有一些问题。关于未定义handleToggleClick的错误。另外，我在此组件中使用的每个组件都没有放在卡体内：它放在下面...

因此，我实际上需要将要显示或隐藏的组件内容放置在组件内部，并使折叠组件起作用。

我正在使用纯Bootstrap 4类，用于卡片，标题和文本，并且我想使用纯react来实现打开/关闭的功能。...

这是我要插入卡片组件的示例组件：

import React, { Component } from 'react';
import CardToggle from '../CardToggle';

import { ThePermissions } from '../../constants';

class Permissions extends Component {
  render() {
    return (
      <div>
        <CardToggle title="Permissions" />
        <button className="btn btn-primary">Submit</button> // From 
         here it is outside the card
        <div>
        More Content here
        </div>
      </div>
    );
  }
}

export default Permissions;

任何人都可以帮我一下。我不想使用库，并且希望组件可重用。我还想在已经很大的主概览屏幕中处理关于show/hide的其他逻辑。

如果您也想看到它，请ping我。

Answer 1

1。对于未定义的错误，而不是

handleToggleClick = () => {
    this.setState({
        isOpen: !isOpen
    });
};

尝试

handleToggleClick() {
    this.setState({
        isOpen: !isOpen
    });
}

2。对于未出现在组件内部的内容，请尝试：

render() {
    const { title, children } = this.props;
    return (
        <div className="card my-2 border-0 rounded-0">
        <div className="card-body d-flex">
            <h4>
            <a className="text-secondary" href="">
                {title}
            </a>
            </h4>
            <div className="/*some class*/">
                 {children} // this is where the content will be shown 
            </div>
        </div>
        </div>
    );
}

创建可折叠卡组件

1 个答案: