在访问时创建一个确认窗口

Question

我是React的新手，一直在观看有关传递道具的教程。当访问者访问我的网站时，我试图创建一个简单的确认窗口。该窗口在访问时自动加载，用户单击确认并继续。问题是，我无法通过传递函数来关闭窗口并使用localStorage，因此当用户移出站点时，窗口不会一直弹出。对我做错了什么建议吗？

App.js

import React, { Component } from 'react';
import Dialog from './Components/dialog';

class App extends Component{
  render(){
    return(
      <div className="App">
        <Dialog>
        Bacon ipsum dolor amet drumstick pancetta swine ball tip chicken, sausage shank spare ribs turducken. Picanha pig doner short loin alcatra. Shankle prosciutto beef pork loin, leberkas salami tri-tip capicola. Picanha porchetta alcatra spare ribs turducken shankle ribeye swine biltong meatloaf pastrami. Ribeye landjaeger filet mignon pork chop capicola boudin shoulder pork belly doner andouille buffalo kielbasa pancetta bresaola. Cow jerky biltong prosciutto drumstick turducken shank pastrami frankfurter venison pig. Pork chop doner kevin porchetta burgdoggen shankle chislic tenderloin shoulder.
        </Dialog>
      </div>
    );
  }
}

export default App;

dialog.js

import React, { Component } from 'react';

let dialogStyles = {
     width: '700px',
     height: '300px',
     maxWidth: '100%',
     margin: '0 auto',
     position: 'fixed',
    left: '50%',
    top: '50%',
    transform: 'translate(-50%,-50%)',
    zIndex: '999',
    backgroundColor: '#eee',
    padding: '10px 20px 40px',
    borderRadius: '8px',
    display: 'flex',
    flexDirection: 'column'
   };

   let boxStyle ={
       display: 'none'
   }

   let dialogCloseButtonStyles = {
     marginBottom: '15px',
     padding: '3px 8px',
     cursor: 'pointer',
     borderRadius: '50%',
     border: 'none',
     width: '30px',
     height: '30px',
     fontWeight: 'bold',
     alignSelf: 'flex-end'
  };

 let ackStyles = {
     fontWeight: 'bold',
     padding: '5px',
     width: '120px',
     height:' 50px',
     backgroundColor: '#a6a6a6',
     cursor: 'pointer',
     border: 'none',
     position: 'top-bottom',
     borderRadius: '5%',
     alignSelf: 'center'
   };

  let ackForm = {
     alignSelf: 'center'
  };

 class Dialog extends Component {
     state = {
       isOpen: true
 } 

componentDidMount(){
    const isOpen = sessionStorage.getItem('isOpen') === 'false' 
    this.setState({ isOpen });
}

handleChange = (e) => {
    const input = e.target;
    const value = input.type === 'checkbox' ? input.checked : input.value;
}

ackSubmit = () => {
    const { isOpen } = this.state;
    sessionStorage.setItem('isOpen', isOpen);
};

render() {
    return (
        <div style={dialogStyles}>
            <div>{this.props.children}</div>
            <br/>
            <form onSubmit={this.ackSubmit} style={ackForm}>
                <input style={boxStyle} name='isOpen' checked={this.state.isOpen} onChange={this.handleChange} type="checkbox" />
                <button style={ackStyles} onChange={(e) => this.setState({       isOpen: false })}>ACKNOWLEDGE</button>
            </form>
        </div>
    );
   }
 }

export default Dialog;

Answer 1

我认为这是因为您要在isOpen: true类的state中设置Dialog，然后仅检查是否应该打开之后组件已安装。

接下来我会尝试：

class Dialog extends Component {
    state = {
        isOpen: !localStorage["alreadyVisited"];
    }
...