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

Question

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

这是我的组件

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,
})

如何在单击"is"或“否”时隐藏 MyPopUp？我找不到将 PopUp 组件与 MyButton 中的 onClick 链接的方法，如何添加状态以便显示或不显示？

Answer 1

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

首先，我看到您正在将 redux 与您的 Button 一起使用，要执行您想执行的操作，您有一些选择:

    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)

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

希望对你有帮助