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我不認爲提示重新繪製。