如何使用React隱藏按鈕

Question

我是React的新手，我想在點擊後隱藏按鈕。下面的兩個代碼段下面是proptypes。我是否需要隱藏提交按鈕？點擊後如何隱藏按鈕？我讀到，我可以通過州或CSS來實現。既然這是一個按鈕，它似乎會更容易使用CSS？任何幫助，將不勝感激。

Answer 1

請參閱有關如何有條件地隱藏元素此琴：

https://jsfiddle.net/69z2wepo/77987/

基本理念是，在渲染完成這一工作;

render: function() { 
    return (<div> 
    {this.state.clicked && <div>Shown or hidden?</div>} 
    </div>); 
    } 

這個想法是你依賴組件狀態來決定是否應該呈現任何東西。您操縱強制重新渲染組件的狀態。

我認爲這是一個「更好」的方式比使用CSS，但CSS有它的用途。（這可以用於一個「隱藏」類有條件地添加到元）

Answer 2

/* eslint-disable jsx-a11y/img-has-alt,class-methods-use-this */ 
import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import todoStyle from 'src/style/todo-style.scss'; 
import { Router, Route, hashHistory as history } from 'react-router'; 
import Myaccount from 'src/components/myaccount.jsx'; 

export default class Headermenu extends Component { 

    constructor(){ 
    super(); 

    // Initial state 
    this.state = { open: false }; 

} 

toggle() { 
    this.setState({ 
    open: !this.state.open 
    }); 
} 

    componentdidMount() { 
    this.menuclickevent = this.menuclickevent.bind(this); 
    this.collapse = this.collapse.bind(this); 
    this.myaccount = this.myaccount.bind(this); 
    this.logout = this.logout.bind(this); 
    } 

    render() { 
    return (
     <div> 

     <div style={{ textAlign: 'center', marginTop: '10px' }} id="menudiv" onBlur={this.collapse}> 
      <button onClick={this.toggle.bind(this)} > Menu </button> 

      <div id="demo" className={"collapse" + (this.state.open ? ' in' : '')}> 
      <label className="menu_items" onClick={this.myaccount}>MyAccount</label> 
      <div onClick={this.logout}> 
       Logout 
      </div> 
      </div> 

     </div> 
     </div> 
    ); 
    } 

    menuclickevent() { 
    const listmenu = document.getElementById('listmenu'); 
    listmenu.style.display = 'block'; 
    } 



    logout() { 
    console.log('Logout'); 
    } 
    myaccount() { 
    history.push('/myaccount'); 
    window.location.reload(); 

    } 


} 

enter code here