如何使用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