单击 X 时隐藏/显示组件答案

【问题标题】：Hide/Show a component when clicking on the X单击 X 时隐藏/显示组件
【发布时间】：2022-01-06 00:48:21
【问题描述】：

我是使用 React 的新手，我对 JavaScript 有基本的了解。我之前在 JavaScript 中创建了这个 Web 应用程序，但我正在 React 中重新创建它以进行练习。

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

我试图在用户单击组件按钮时显示“免责声明”组件，然后在单击 X 时再次关闭。

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

我的设置错了吗？

索引.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

【问题讨论】：

标签： javascript reactjs components

【解决方案1】：

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

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

现场演示

并将方法作为道具传递

{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>

【讨论】：