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

这是我的按钮

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

---

单击“是”或“否”时，如何隐藏我的弹出窗口？我找不到将弹出组件与onClick from MyButton链接的方法，我如何添加状态以便显示或不显示它？

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

首先，我看到您正在使用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)

const name=“pewlas”
导出类MyPopUpComponent扩展了React.Component{
状态={hidden:false}
handleClick=value=>{
this.props.myButton（this.props.username、姓氏、值）//操作创建者
这个.setState（{hidden:true}）/**很重要**
}
render（）{
const{username}=this.props
if（this.state.hidden）{
返回空
}
返回(
一些文本


this.handleClick（“yes”）}
>
[是]
{" "}
this.handleClick（“no”）}
>
[否]
{" "}
)
}
}
const mapDispatchToProps={
我的按钮
}
export const MyPopUp=connect（null，mapDispatchToProps）（MyPopUpComponent）

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

---

希望对您有所帮助

谢谢您的回答，但什么应该是“是”和“否”？我应该在那里放什么？改变状态？问题是我有一个自定义按钮，你可以在我的问题上看到，如果用户单击“是”或“否”，我如何简单地不显示弹出窗口？是的，我必须处理点击，这样我才能隐藏它，但是复制你的代码不起作用，我应该放什么来代替“是”或“否”？还有把手舔里面？我只想更改状态，使弹出窗口为假。嗨，我想你不需要自定义按钮。如果希望在用户单击yes或no时分派操作，只需将所需数量的参数传递给handleClick并分派操作即可。我告诉你的“随心所欲”部分。我将更改代码，使其比您需要的更接近。现在，您连接到重排弹出窗口，当用户单击“是”或“否”时，您将使用参数（用户名、姓氏以及“是”或“否”，取决于按下的按钮）来调度操作MyButton。之后，状态将更改为隐藏，弹出窗口将不显示。我无法修改该状态。。。如何使用此自定义按钮调整此功能？

    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)