0
92
ViewsOcultar/Mostrar un componente al hacer clic en la X
Soy nuevo en el uso de React, tengo un conocimiento básico de JavaScript. He creado esta aplicación web en JavaScript antes, pero la estoy recreando en React para practicar.
Aquí está la aplicación web original: https://iamstevenhale.github.io/DrunkenHeroes/menu.html
Estoy tratando de que se muestre el componente 'Descargo de responsabilidad' cuando el usuario hace clic en el botón del componente y luego se cierra nuevamente cuando hace clic en la X.
¿Cuál es la forma correcta de navegar entre páginas al hacer clic en los botones?
¿Está mal mi configuración?
ÍNDICE.js
import React from 'react' import ReactDOM from 'react-dom' import 'bootstrap/dist/css/bootstrap.css' import Menu from './components/menu' ReactDOM.render(<Menu />, document.getElementById('root'))MENU.js (Componente)
import Disclaimer from './disclaimer' import './styles.css' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' class Menu extends React.Component { constructor(props) { super(props) this.state = { showComponent: false, } this._onButtonClick = this._onButtonClick.bind(this) } _onButtonClick() { this.setState({ showComponent: true, }) } render() { return ( <div> <div> <h1 className='title sway'>Drunken Heroes</h1> </div> <div className='centreDivContents'> <p className='subtitle'>What happens when Heroes Party?</p> </div> <div className='centreDivContents'> <button className='HSButton'>Play</button> <br /> <button className='HSButton'>Rules</button> <br /> <div> <button className='HSButton' onClick={this._onButtonClick}> Disclaimer </button> {this.state.showComponent ? <Disclaimer /> : null} </div> </div> </div> ) } } export default MenuEXENCIÓN DE RESPONSABILIDAD.js (componente)
import React from 'react' import 'bootstrap/dist/css/bootstrap.css' import './styles.css' class Disclaimer extends React.Component { render() { return ( <div> <div> <h1>X</h1> </div> <h1>Disclaimer - Input the disclaimer text here.</h1> </div> ) } } export default Disclaimer1 answers
Answer question0
1) Puede crear un método hideDisclaimer y establecer el estado showComponent en false como:
hideDisclaimer = () => { this.setState({ showComponent: false, }); };Demo en vivo
y pasar el método como accesorio
{this.state.showComponent ? ( <Disclaimer hideDisclaimer={this.hideDisclaimer} /> ) : null} y configure el oyente onClick en el button como he hecho el button h1 para:
<button onClick={this.props.hideDisclaimer}>X</button> 2) Puede crear el método _onButtonClick genérico y pasar el estado como argumento y establecer el estado como parámetro como:
_onButtonClick(state) { this.setState({ showComponent: state, }); }Demo en vivo
y pasar el mismo método que:
{this.state.showComponent ? ( <Disclaimer _onButtonClick={this._onButtonClick} /> ) : null} y al hacer onClick en el botón X , puede invocar el método como:
<button onClick={() => this.props._onButtonClick(false)}>X</button>