代码之家 › 专栏 › 技术社区 › StuartDTO

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

react-redux redux reactjs javascript

StuartDTO · 技术社区 · 6 年前

单击“是”或“否”时,我试图隐藏组件。当我点击的时候我得到了正确的输出,但是像弹出窗口一样的组件仍然在屏幕上,我不能删除它。

这是我的组件

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 单击“是”或“否”时?我找不到将弹出组件链接到onclick from mybutton的方法,如何添加状态以便显示它?

1 回复 | 直到 6 年前

Samuel Martinez Toledano 6 年前

我会尽量帮你重构一些代码。

首先,我已经看到你正在使用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)

您可以这样做,首先,显示隐藏为false的弹出初始化状态。正如您在渲染中看到的,您将使用按钮显示文本,一旦用户按“是”,或者现在您可以启动一个操作或执行任何您想要的操作,然后,您将“隐藏”设置为“真”。状态已更改,因此再次调用render函数,返回null,隐藏组件。

希望对你有帮助