So blenden Sie eine Schaltfläche mit React

Question

Ich bin neu zu reagieren und ich möchte eine Schaltfläche nach dem Klick ausblenden. Unterhalb der beiden folgenden Codesegmente befinden sich die Propotypen. Muss ich einen hideSubmit Button haben? Wie verstecke ich die Schaltfläche nach dem Klick? Ich lese, dass ich es durch Staat oder css tun kann. Da dies eine Schaltfläche ist, scheint es einfacher zu sein, CSS zu verwenden. Jede Hilfe wäre willkommen.

Answer 1

finden Sie auf dieser Geige, wie man bedingt ein Element auszublenden:

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

Grundkonzept ist, dass Sie dies in Ihrem machen tun;

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

Die Idee ist, dass Sie abhängig vom Zustand der Komponente entscheiden, ob etwas gerendert werden soll. Sie manipulieren den Zustand, der ein Rendern für die Komponente erzwingt.

Ich denke, dies ist eine „bessere“ Art und Weise als mit CSS, aber CSS ist es auch verwendet. (Dies kann verwendet werden, bedingt eine ‚versteckte‘ Klasse auf das Element hinzufügen)

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