Question

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

点击时没有动画
当父级没有对其道具进行更改时，子组件会重新绘制（因为您可以看到extra值对此类是私有的。）

搜索后，我以前找不到这个问题。如何让折叠与Button单击相关联。

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>
    );
  }
}

Answer 1

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

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

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

React-Bootstrap折叠按钮不起作用

1 个答案: