React.js切換顯示

我想切換我的頁面上的內容與React.js中的按鈕如果我按下按鈕，我希望內容消失。如果我再次按它，我希望內容再次出現。我嘗試了所有我能想到的，但似乎沒有任何工作。我最初嘗試了一個三元語句來查看我是否可以切換，但它只是打破了我的應用程序。有人能告訴我如何改進這部分項目？以下是我有：React.js切換顯示

//App.js 


import React, { Component } from 'react'; 

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     isToggle: false 
    }; 
    } 

    handleClick(e) { 
    this.setState({ !isToggle ? isToggle: true : isToggle: false }); 
    } 

    render() { 

    const style = { 
     display: none 
    }; 

    return (
     <div> 
     <h1 className="text-xs-center">List of items:</h1> 
     <button onClick={this.handleClick.bind(this)} className="btn btn-primary">Toggle</button> 
     <div className="container" style={!isToggle ? style.display = none : style.display = block}> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
     </div> 
     </div> 
    ); 
    } 
} 

export default App;

基本上，我想切換第1項，第2項，第3項，第4項

來源

2017-05-06 emvo

這將是它的形狀，如果我要彌補組件。

import React, { Component } from 'react'; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {isToggle: false}; 
    this.handleClick = this.handleClick.bind(this); 
    } 

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

    render() { 
    return (
     <div> 
     <h1 className="text-xs-center">List of items:</h1> 
     <button 
      className="btn btn-primary" 
      onClick={this.handleClick} 
     > 
      Toggle 
     </button> 
     <div 
      style={{display: this.state.isToggle ? 'block': 'none'}} 
      className="container" 
     > 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
     </div> 
     </div> 
    ); 
    } 
} 

export default App;

來源

2017-05-06 05:12:38 Season

我明白了。謝謝你的幫助！我想我的第一個錯誤是'handleClick'方法。我應該改變狀態，而不是做三元條件。第二個錯誤是我忘了將樣式的內容封裝在'{}'中，並且不需要創建'const style'。 – emvo

是的，差不多。還要注意，我在構造函數中將'this'綁定到'handleClick'而不是render函數。每次'state'改變時，渲染函數都會反覆運行，結果'bind'方法也會運行。它變得多餘，可以優化。 – Season

試試我的方法

import React, {Component} from 'react'; 
class App extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      isShow: false 
     }; 
    } 

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

    getComponent() { 
     if (this.state.isShow) { 
      return (
       <div className="container"> 
        <li>Item 1</li> 
        <li>Item 2</li> 
        <li>Item 3</li> 
        <li>Item 4</li> 
       </div> 
      ) 
     } 

     return ''; 
    } 

    render() { 
     return (
      <div> 
       <h1 className="text-xs-center">List of items:</h1> 
       <button onClick={this.handleClick.bind(this)} className="btn btn-primary">Toggle</button> 
       {this.getComponent()} 
      </div> 
     ); 
    } 
} 
export default App;

來源

2017-05-06 03:25:27

改變這一行。。

 <div className="container" style={!isToggle ? style.display = none : style.display = block}>

到...

<div className="container" style={!isToggle ? {display:'none'} : {display: 'block'}} >

inline'style'應該返回一個JSON對象{{key：'value，key2'：'value2'}}。

來源

2017-05-06 03:28:45

監守你嘗試了將style.display分配到HTML風格屬性，它是錯的，改變的一部分，它應該共同努力，試試這個如下：

//App.js 


import React, { Component } from 'react'; 

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     isToggle: false 
    }; 
    } 

    handleClick(e) { 
    this.setState({ !isToggle ? isToggle: true : isToggle: false }); 
    } 

    render() { 

    const style = { 
     display: none 
    }; 

    return (
     <div> 
     <h1 className="text-xs-center">List of items:</h1> 
     <button onClick={this.handleClick.bind(this)} className="btn btn-primary">Toggle</button> 
     <div className="container" style={!isToggle ? {display:'none'} : {display: 'block'}}> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
     </div> 
     </div> 
    ); 
    } 
} 

export default App;

有關如何風格更多信息作品，請看下面的鏈接：

https://www.codecademy.com/articles/html-inline-styles

來源

2017-05-06 06:10:31 Alireza

React.js切換顯示

回答

相關問題