如何使用ReactJS刷新后如何持续DIV

下面的代码正常工作，单击时可以在弹出框上显示用户信息。

现在，我想坚持任何打开的弹出框的DIV消息内容打开，直到我通过单击关闭按钮将其关闭。

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

代码样本1

在这里，可以使用selector：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>
    );
  }
}

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

class Popup extends Component {
    state = {
      isOpen: localStorage.getItem('popoverIsOpen') || false,
    }
    componentDidMount() {
       window.addEventListener('unload', () => {
          localStorage.setItem('popoverIsOpen', this.state.isOpen)
       })
    }
}

只需在资源卸载之前保存打开的状态和所需的任何数据，然后在初始化弹出组件时从localstorage中获取数据。

我目前最好的选择是将jQuery用作reactjs的选项，并为每个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');
});

相关内容

最新更新

热门标签：