时间戳

首页 > 解决方案 > 单击自定义按钮组件时隐藏组件时很热

javascript - 单击自定义按钮组件时隐藏组件时很热

问题描述

单击“是”或“否”时，我试图隐藏组件。单击时我得到了正确的输出，但是像弹出窗口一样的组件保留在屏幕中，我无法将其删除。

这是我的组件

export default class MyPopUp extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    let { username } = this.props

    return (
      <div className="modal-wrapper">
        <div className="modal">
          Some Text
          <br />
          <MyButton
            name={username}
            surname="pewlas"
            arguments={["yes"]}
          >
            [ Yes ]
          </PostCommandButton>{" "}
          <MyButton
            name={username}
            surname="pewlas"
            arguments={["no"]}
          >
            [ No ]
          </MyButton>{" "}
        </div>
      </div>
    )
  }
}

这是MyButton

import { connect } from "react-redux"
import button from "../../../common/components/Button"
import { myButton } from "../actions/myButton"

const MyButton = connect(
  undefined,
  (dispatch, { name, surname, arguments: args = [] }) => ({
    onClick: () => dispatch(button(name, username, args)),
  }),
)(Button)

export default MyButton

这是我的按钮

export const MY_BUTTON = "MY_BUTTON"
export const myButton = (name, surname, args) => ({
  type: MY_BUTTON,
  name,
  surname,
  arguments: args,
})

MyPopUp单击是或否时如何隐藏？我找不到将我的 PopUp 组件与 MyButton 的 onClick 链接的方法，如何添加一个状态以便我可以显示它或不显示它？

标签： javascriptreactjsreduxreact-redux

解决方案

我将尝试帮助您重构一些代码。

首先，我看到您在 Button 中使用 redux，要执行您想做的事情，您有一些选择：

    const SURNAME = "pewlas"
export class MyPopUpComponent extends React.Component {
  state = { hidden: false }

  handleClick = value => {
    this.props.myButton(this.props.username, SURNAME, value) //the action creator
    this.setState({ hidden: true }) //**IMPORTANT**
  }

  render() {
    const { username } = this.props

    if (this.state.hidden) {
      return null
    }

    return (
      <div className="modal-wrapper">
        <div className="modal">
          Some Text
        <br />
          <button
            name={username}
            surname={SURNAME}
            onClick={() => this.handleClick("yes")}
          >
            [ Yes ]
        </button>{" "}
          <button
            name={username}
            surname={SURNAME}
            onClick={() => this.handleClick("no")}
          >
            [ No ]
        </button>{" "}
        </div>
      </div>
    )
  }
}

const mapDispatchToProps = {
  myButton
}

export const  MyPopUp = connect(null, mapDispatchToProps)(MyPopUpComponent)

你可以做这样的事情，首先，你显示弹出初始化状态隐藏为假。正如您在渲染中看到的那样，您将使用按钮显示文本，一旦用户按下是或现在您可以启动一个动作或做任何您想做的事情，然后，您将隐藏设置为 true。状态已更改，因此再次调用渲染函数返回 null，隐藏组件。

希望对你有帮助

推荐阅读