如何使用reactjs中的按鈕隱藏組件？

我已閱讀有關如何顯示/隱藏組件的方法，並對其進行了一些修改，但是，我的修改無效。 enter link description here 如何使用reactjs中的按鈕隱藏組件？

我不工作的代碼是在這裏：

var Child = React.createClass({ 
 
    render: function() { 
 
    return (
 
     <div className="container"> 
 
     <p>Welcome to our website</p> 
 
     <button onClick={this.onClick}>Click me to close</button> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
var ShowHide = React.createClass({ 
 
    getInitialState: function() { 
 
    return { childVisible: ture }; 
 
    }, 
 
    
 
    render: function() { 
 
    return(
 
     <div> 
 
     { 
 
      this.state.childVisible 
 
      ? <Child /> 
 
      : null 
 
     } 
 
     </div> 
 
    ) 
 
    }, 
 
    
 
    onClick: function() { 
 
    this.setState({childVisible: !this.state.childVisible}); 
 
    } 
 
}); 
 
    
 
React.render(<ShowHide />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script> 
 

 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

我有兩個目標：1。的第一個目標是添加一個按鈕來關閉這個迎賓禮盒。 2.第二個目標是向它添加一個cookie，以便當用戶第一次訪問該網站時向用戶顯示該歡迎框，並且一旦他們點擊關閉它，如果不清楚就不會再顯示cookie。

來源

2017-06-02 宗天博

您必須將onClick函數作爲道具從ShowHide傳遞到Child。

<Child onClick={this.onClick} />

然後你在Child按鈕看起來像這樣

<button onClick={this.props.onClick}>...</button>

你也有你的初始化狀態一點點錯字，你寫ture而不是true。

來源

2017-06-02 06:20:27 vasekhlav

謝謝！有用。 –

不客氣:) – vasekhlav

作爲一個額外的提示，我建議你使用ES6類而不是React的createClass。更好的性能和更多的標準：D

來源

2017-06-02 09:36:05 rolandaugusto

如何使用reactjs中的按鈕隱藏組件？

回答

相關問題