如何在reactjs中“通过单击警报框确定按钮隐藏div”

Question

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

.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

最终输出：

您可以这样做，我使用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 2

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

handleClick()
  {
    
       alert("hi");

       // in this place change your state
  }

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