如何使用reactjs在刷新后持久化div_Reactjs

如何使用reactjs在刷新后持久化div

reactjs

如何使用reactjs在刷新后持久化div,reactjs,Reactjs,下面的代码工作正常，单击时可以在弹出框中显示用户信息现在，我想保留任何打开的弹出框中的div消息内容，这样即使页面刷新，该div仍将保持不变直到我通过单击关闭按钮将其关闭我有两个工作示例代码来说明我试图实现的目标代码示例1 这里可以使用选择器：target按照下面的代码设置元素的样式 <!doctype html> <html> <head> <link href="style.css" type="text/css"

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

现在，我想保留任何打开的弹出框中的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>


#tableDiv{display:none；}
#tableDiv:target{display:block！important；}
某物
函数showTable（）{
location.hash='tableDiv'；
}
函数可隐藏（）{
location.hash=''；
}

代码示例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>


$（文档）.ready（函数（）{
//使用localStorage.removietem（'show'）；取消设置项
var show=localStorage.getItem（'show'）；
如果（显示=='true'）{
$（'#tableDiv1'）.show（）；
}
$（“#btn”）。单击（函数（事件）{
event.preventDefault（）；
$（'#tableDiv1'）.show（）；
setItem（'show'，'true'）；
});
$（“#btn_隐藏”）。单击（函数（事件）{
event.preventDefault（）；
$（'#tableDiv1'）.show（）；
removietem（'show'，'true'）；
}); 
});
某物

这里是我想在弹出框中实现它的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>
    );
  }
}

import React，{Component，Fragment}来自“React”；
从“react dom”导入{render}；
从'react router dom'导入{Link}；
从“axios”导入axios；
类用户扩展了React.Component{
open=（）=>this.props.open（this.props.data.id，this.props.data.name）；
render（）{
返回(
this.open（this.props.data.id，this.props.data.name）}
>
{this.props.data.name}
);
}
}
类OpenedUser扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
隐藏：假
};
}
componentDidMount（）{}
toggleHidden=（）=>this.setState（prevState=>（{hidden:！prevState.hidden}））；
close=（）=>this.props.close（this.props.data.id）；
render（）{
返回(
关闭
用户{this.props.data.id}
name{this.props.data.name}
{this.state.hidden？空：(
消息将出现在此处
{“”}在下面显示聊天信息…{“”}
此处的消息内容。。。。。。。。
)}
);
}
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
正在加载图像：false，
显示：是的，
ActiveID:[]，
数据：[
{id:1，名称：“用户1”}，
{id:2，名称：“用户2”}，
{id:3，名称：“user 3”}，
{id:4，名称：“user 4”}，
{id:5，名称：“user 5”}
]
};
}
切换（）{
这是我的国家({
已显示：！this.state.show
});
}
打开=（id，名称）=>{
警报（id）；
警报（名称）；
//启动axios api调用
常量用户_数据={
uid:“id”，
uname：“姓名”
};
this.setState（prevState=>({
ActiveID:prevState.ActiveID.find（user=>user==id）
？prevState.activeId
：[…prevState.ActiveID，id]
}));
};
close=id=>{
this.setState（prevState=>({
ActiveID:prevState.ActiveID.filter（用户=>user！==id）
}));
};
renderUser=id=>{
const user=this.state.data.find（user=>user.id==id）；
如果（！用户）{
返回null；
}
返回(
);
};
renderActiveUser=（）=>{
返回(
{this.state.activeIds.map（id=>this.renderUser（id））}
);
};
render（）{
返回(
{this.state.data.map（person=>(
))}
{this.state.activeIds.length！==0&&this.renderActiveUser（）}
);
}
}

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

class Popup extends Component {

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

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

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

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

class Popup extends Component {

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

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

只需在卸载资源之前将打开的状态和所需的任何数据保存在localStorage中，然后在初始化弹出组件时从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');
});

目前我最好的选择是使用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');
});

您所需要做的就是将本地存储合并到构造函数中。根据

localStorage.getItem（'show'）

（或您的哈希方法）的返回值设置初始状态作为旁注，通常，您必须有一个很好的理由将直接在DOM上运行的jQuery与对数据运行并将其反映到DOM中的React混合使用。这两个人在一起打得不好，所以你必须知道你在做什么。是否有理由同时使用jQuery和React？你可能只能使用其中一个而放弃另一个吗？如果你正在使用React构建应用程序，你应该删除jQuery并忘记它的存在。我不会将reactjs与jQuery结合。Jquery只是一个示例。不过还是要找到一种方法来获得jquery代码的reactjs等价物，然后将其合并到我的reactjs代码中。您需要做的就是将本地存储合并到您的代码中