Question

下面的代码运行良好，单击后可以在弹出框中显示用户信息。

现在，我要保留任何打开的弹出框的div消息内容，以便即使刷新页面，该div仍将直到我单击关闭按钮将其关闭。

我有两个有效的示例代码来说明要实现的目标。

代码示例1

这里可以使用选择器：target按照以下代码设置元素的样式

<!doctype html>
<html>
    <head>

        <link href="style.css" type="text/css" rel="stylesheet" />

  <meta charset="utf-8">



    </head>
    <body>
<style>
    #tableDiv {display:none;}
    #tableDiv:target {display:block!important;}
</style>

<div id="tableDiv">
    <table>
        <tr>
            <td>something</td>
        </tr>
    </table>
</div>




<input type="button" value="Show" onClick="showTable()"/>
<input type="button" value="Hide" onClick="hideTable()"/>

<script type="text/javascript">
   function showTable() {
       location.hash='tableDiv';
   }
   function hideTable() {
       location.hash='';
   }
</script>

代码示例2

这使用localStorage来保留div消息的内容

        <script src='jquery-3.1.1.min.js' type='text/javascript'></script>

<script>
$(document).ready(function(){
    // use localStorage.removeItem('show'); to unset an item
    var show = localStorage.getItem('show');
    if(show === 'true'){
        $('#tableDiv1').show();
    }

    $("#btn").click(function(event){
        event.preventDefault();
        $('#tableDiv1').show();
        localStorage.setItem('show', 'true');
    });

 $("#btn_hide").click(function(event){
        event.preventDefault();
        $('#tableDiv1').show();
        localStorage.removeItem('show', 'true');
    }); 

});
</script>



<div id="tableDiv1" style="display:none;" >
    <table>
       <td>something</td>
    </table>
</div>
<form method="post" action="#">
    <input type="button" value="Show" id="btn"/>

</form>

</body></html>

这里是 Reactjs ，我要在弹出框中实现它。关于如何在Reactjs中使用它的任何想法

import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import { Link } from 'react-router-dom';
import axios from 'axios';



class User extends React.Component {
  open = () => this.props.open(this.props.data.id, this.props.data.name);
  render() {
    return (
      <React.Fragment>
        <div key={this.props.data.id}>
          <button
            onClick={() => this.open(this.props.data.id, this.props.data.name)}
          >
            {this.props.data.name}
          </button>
        </div>
      </React.Fragment>
    );
  }
}

class OpenedUser extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            hidden: false
        };
    }
    componentDidMount(){}

    toggleHidden = () => this.setState(prevState => ({ hidden: !prevState.hidden }));

    close = () => this.props.close(this.props.data.id);

    render() {
        return (
            <div key={this.props.data.id} style={{ display: "inline-block" }}>
                <div className="msg_head">



                    <button onClick={this.close}>close</button>
                    <div>user {this.props.data.id}</div>
                    <div>name {this.props.data.name}</div>
                    {this.state.hidden ? null : (
                            <div id="tableDiv" className="msg_wrap">
                            <div className="msg_body">Message will appear here</div>
                            <b> {" "} Display Chat Message below...{" "}</b>




<b>message content here........</b>


            </div>
          )}
        </div>
      </div>
    );
  }
}
class App extends React.Component {
  constructor() {
    super();

    this.state = {
loading_image: false,
      shown: true,
      activeIds: [],

      data: [
        { id: 1, name: "user 1" },
        { id: 2, name: "user 2" },
        { id: 3, name: "user 3" },
        { id: 4, name: "user 4" },
        { id: 5, name: "user 5" }
      ]
    };
  }

  toggle() {
    this.setState({
      shown: !this.state.shown
    });
  }


  open = (id, name) => {
    alert(id);
    alert(name);

    //start axios api call

    const user_data = {
      uid: "id",
      uname: "name"
    };



    this.setState(prevState => ({
      activeIds: prevState.activeIds.find(user => user === id)
        ? prevState.activeIds
        : [...prevState.activeIds, id]
    }));
  };

  close = id => {
    this.setState(prevState => ({
      activeIds: prevState.activeIds.filter(user => user !== id)
    }));
  };

  renderUser = id => {
    const user = this.state.data.find(user => user.id === id);
    if (!user) {
      return null;
    }
    return (
      <OpenedUser
        key={user.id}
        data={user}
        close={this.close}
      />
    );
  };

  renderActiveUser = () => {
    return (
      <div style={{ position: "fixed", bottom: 0, right: 0 }}>
        {this.state.activeIds.map(id => this.renderUser(id))}
      </div>
    );
  };

  render() {


    return (
      <div>
        {this.state.data.map(person => (

          <User key={person.id} data={person} open={this.open} />

        ))}
        {this.state.activeIds.length !== 0 && this.renderActiveUser()}
      </div>
    );
  }
}

Answer 1

听起来您正在寻找这样的东西：

class Popup extends Component {

    state = {
      isOpen: localStorage.getItem('popoverIsOpen') || false,
    }

    componentDidMount() {
       window.addEventListener('unload', () => {
          localStorage.setItem('popoverIsOpen', this.state.isOpen)
       })
    }
}

在卸载资源之前，只需将打开状态和所需的任何数据保存在localStorage中，然后在初始化Popup Component时从localStorage中获取数据。

Answer 2

我目前最好的选择是在Reactjs中使用jquery作为选项，并为每个div分配一个唯一的ID。正如我上面发布的，我能够使用下面的代码来解决它。

// use localStorage.removeItem('show'); to unset an item
var show = localStorage.getItem('show');
if(show === 'true'){
    $('#Div1').show();
}

$("#persist").click(function(event){
    event.preventDefault();
    $('#Div1').show();
    localStorage.setItem('show', 'true');
});

如何使用reactjs

2 个答案: