Hide/Show 单击 X 时的组件

Question

刚接触React，对JavaScript有基本的了解。我之前在 JavaScript 中创建过此 Web 应用程序，但我正在用 React 重新创建它以供练习。

这是原始的 Web 应用程序： https://iamstevenhale.github.io/DrunkenHeroes/menu.html

我试图在用户单击组件按钮时显示 'Disclaimer' 组件，然后在用户单击 X 时再次关闭。

单击按钮时在页面之间导航的正确方法是什么？

我的设置有误吗？

INDEX.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（组件）

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 Menu

DISCLAIMER.js（组件）

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 Disclaimer

Answer 1

1) 您可以创建一个方法 hideDisclaimer 并将状态 showComponent 设置为 false 为：

hideDisclaimer = () => {
    this.setState({
        showComponent: false,
    });
};

现场演示

并将该方法作为 prop 传递

{this.state.showComponent ? (
  <Disclaimer hideDisclaimer={this.hideDisclaimer} />
) : null}

并在 button 上设置 onClick 侦听器，我已将 h1 设置为 button:

<button onClick={this.props.hideDisclaimer}>X</button>

2) 您可以创建 _onButtonClick 通用方法并将状态作为参数传递并将状态设置为参数：

_onButtonClick(state) {
    this.setState({
        showComponent: state,
    });
}

现场演示

并传递与以下相同的方法：

{this.state.showComponent ? (
  <Disclaimer _onButtonClick={this._onButtonClick} />
) : null}

X 按钮的

和 onClick 然后你可以调用该方法：

<button onClick={() => this.props._onButtonClick(false)}>X</button>

Hide/Show 单击 X 时的组件

Hide/Show a component when clicking on the X

javascript

components

reactjs