如何在 reactjs 中 "Hide a div by clicking alert box ok button"

Question

由于我是新手，所以我对 hide/show 了解不多。
在我的页面中，我有一个切换按钮，当我单击该按钮时，会出现一个包含 3 个选项的容器。
当我单击任何一个选项时，会出现一个警告框。
当我点击警告框中的确定按钮时，整个容器应该隐藏。
工作演示：codesandboxdemo
代码：

.App {
  font-family: sans-serif;
  text-align: center;
}
.style1 {
  cursor: pointer;
  padding-top: 10px;
  border-bottom-left-radius: 1px
}
.style1:hover{
  background-color: #D3D3D3;
}
.box{
  background-color:#eeeeee;
  width:20%;
  margin-top:1px;

}

class Foo extends Component {

  state = { showing: false,  };
  handleClick()
  {
    
       alert("hi");
   
  }

  render() {
      const { showing } = this.state;
      return (
          <div>
              <button onClick={() => this.setState({ showing: !showing })}>toggle</button>
              { showing 
                  ? (
                  <div className="box">
                    <div className="style1" onClick={this.handleClick}>Action1</div>
                  <div className="style1" onClick={this.handleClick}>Action2</div>
                  <div className="style1" onClick={this.handleClick}>Action3</div>
                  </div>
                 )
                  : null
              }
          </div>  
      )
  }
}
export default Foo;

Answer 1

我认为，您必须在警报后更改“handleClick”方法中“显示”的状态。

handleClick()
  {
    
       alert("hi");

       // in this place change your state
  }

Answer 2

最终输出：

这是你如何做到这一点，我使用的是 confirm 对话框而不是警报，因为它有一个 OK 和 Cancel 的选项，所以它会更多用户友好：

import React, { Component } from "react";
import "./styles.css";

class Foo extends Component {
  state = { showing: false };
  handleClick = () => {
    if (window.confirm("Hide Div Emelent")) {
      this.setState({ showing: false });
    }
  };

  render() {
    const { showing } = this.state;
    return (
      <div>
        <button onClick={() => this.setState({ showing: !showing })}>
          toggle
        </button>
        {showing ? (
          <div className="box">
            <div className="style1" onClick={this.handleClick}>
              Action1
            </div>
            <div className="style1" onClick={this.handleClick}>
              Action2
            </div>
            <div className="style1" onClick={this.handleClick}>
              Action3
            </div>
          </div>
        ) : null}
      </div>
    );
  }
}
export default Foo;

工作示例：Codesandbox

Answer 3

Yuri Piskunov 的答案是捷径，即

handleClick() {
alert("hi");
this.setState({ showing: false });

}

我会使用一个名为 react-alert 的库来采取更长的方法这也将允许您设置警报框的样式并为您提供更多控制权 Github: https://github.com/schiehll/react-alert 演示：https://codesandbox.io/s/vibrant-hawking-7ywz9?file=/src/Foo.js:196-271

安装 react-alert 和 react-alert-template-mui

yarn add react-alert
yarn add react-alert-template-mui

在App.js

import React from "react";
import "./styles.css";
import Foo from "./Foo";
import { Provider } from "react-alert";
import AlertMUITemplate from "react-alert-template-mui";

export default function App() {
  return (
    <div className="App">
      <Provider template={AlertMUITemplate}>
        <Foo />
      </Provider>
    </div>
  );
}

和Foo.js

import React from "react";
import "./styles.css";
import { withAlert } from "react-alert";

class Foo extends React.Component {
  state = {
    showing: false,
    alert: this.props.alert
  };

  handleClick() {
    this.state.alert.show("Oh look, an alert!", {
      onClose: () => {
        this.setState({ showing: false });
      } // callback that will be executed after this alert is removed
    });
  }

  render() {
    const { showing } = this.state;
    return (
      <div>
        <button onClick={() => this.setState({ showing: !showing })}>
          toggle
        </button>
        {showing ? (
          <div className="box">
            <div
              className="style1"
              onClick={() => this.handleClick(this.props)}
            >
              Action1
            </div>
          </div>
        ) : null}
      </div>
    );
  }
}
export default withAlert()(Foo);

如何在 reactjs 中 "Hide a div by clicking alert box ok button"

How to "Hide a div by clicking alert box ok button" in reactjs

show-hide

reactjs