基於按鈕狀態的顯示/隱藏

我試圖創建一個手風琴風格的按鈕，並設置我的組件與按鈕功能來隱藏我的列表點擊，但我列表不會再出現，並且還想添加隱藏/顯示列表之間的動畫過渡。我應該在handleClick()函數中使用prevState嗎？有處理動畫的首選方法嗎？何反應？ CSS？基於按鈕狀態的顯示/隱藏

//Render Links 
const ReportLinks = props => { 
    return (
     <ul> 
      { 
       props.links.map((link, index) => { 
       return (<li key={index}><a href={link.reportLink}>{link.reportLink}</a></li>) 
       }) 
      } 
     </ul> 
    ) 
} 


class Footer extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { linksHidden: true }; 

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

    handleClick(){ 
     this.setState({ linksHidden: false }); 
    } 

    render() { 
     return (
      <div className="annotation-card__footer"> 
       <button onClick={this.handleClick}>Report Links ({this.props.report.length})</button> 
       { this.state.linksHidden ? <ReportLinks links={this.props.report}/> : null } 
      </div> 
     ); 
    } 
}

來源

2017-10-18 cphill

我更新了我的答案以解決您的問題。 –

我想我找到了你的問題。在handleClick方法中，將狀態更改爲false以隱藏列表。當再次按下按鈕顯示列表時，他們所做的就是將狀態再次設置爲假。像這樣翻轉狀態：

handleClick() { 
    this.setState({ linksHidden: !this.state.linksHidden }); 
}

編輯：菲利克斯·克林是正確的。上面的代碼對於簡單的應用程序來說是可以的，但是當你的應用程序變得更加複雜並且setState可以在很短的時間內被調用很多次時，最好使用Felix Kling所說的函數。

handleClick() { 
    this.setState(state => ({ ...state, linksHidden: !state.linksHidden })); 
}

至於動畫，你可以使用CSS轉換。狀態改變時只需添加或刪除一個類。如果您想要更多控制，請嘗試使用react-motion。我沒有任何經驗，但使用起來並不難。

來源

2017-10-18 00:32:45

工作。謝謝！ – cphill

更好的做法是將函數傳遞給'setState'，以確保您始終使用最新狀態：'this.setState（state => this.setState（{linksHidden：！state.linksHidden}））;'。 –

基於按鈕狀態的顯示/隱藏

回答

相關問題