React-Bootstrap折叠按钮不起作用

Question

我遇到了折叠问题。点击处理程序正在工作，但额外区域仅在下一次重新写入父组件后才会（未）折叠。这两种方式

• 坏消息出现在点击时没有动画
• 一个子组件越来越重画时，有由父母为其道具没有变化（因为你可以看到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> 
    ); 
    } 
} 

Answer 1

有似乎是阵营的自举文件中了一个解决方案。

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

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