2

我遇到了折叠问题。单击处理程序正在工作，但额外区域仅在下一次重写父组件后（未）折叠。这是两个方面的坏消息

  • 点击时没有动画
  • 当父组件没有更改其道具时，子组件将被重绘（您可以看到该extra值是此类私有的）。

经过搜索，我之前找不到这个问题。如何让折叠与按钮单击相关联。

import { Grid, Row, Col, Input, Button, Collapse } from 'react-bootstrap';

import styles from './styles';

export class Entry extends Component {

  constructor(props) {
    super(props);
    this.extra = false;    // alternative that also did not work
    this.settings = {extra:false};
  }

  render() {
    const { entryData } = this.props;

    return (
      <div className={styles}>
        <h3 className="orgname">{entryData.orgName}</h3>
        <Button bsSize="xsmall" onClick={this.close}>X</Button>

        <Button onClick={ () => {this.settings.extra = !this.settings.extra; console.log("click", this.settings.extra) } } >
          more...
        </Button>
        <Collapse in={this.settings.extra}>
          <div>
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
              Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
          </div>
        </Collapse>

      </div>
    );
  }
}
4

1 回答 1

0

在 React-Bootstrap 文档中似乎有一个解决方案。

https://react-bootstrap.github.io/components.html#transitions-collapse

特别是，我注意到他们使用this.setState，我相信它会提示它进行重新渲染，而不是this.extra我认为不会提示重新渲染的设置。

于 2016-06-24T07:06:53.213 回答