Reactを使用してボタンを非表示にする方法

Question

私はReactを初めて使用しました。クリック後にボタンを非表示にしたいと考えています。以下の2つのコードセグメントの下にプロタイプがあります。 hideSubmitボタンが必要ですか？クリック後にボタンを隠すにはどうすればいいですか？私は状態や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