React Local Storage 以定位先前选择的按钮

Question

每个按钮在按下时都会改变颜色。我希望它们在每次重新加载页面时都保持该颜色，直到 localStorage.clear() 变为运行。因此，我正在尝试将之前应用的 css 重新应用到本地存储。我的想法是存储每个按钮的Id，循环遍历Id，重新申请css。但它不断抛出错误：“无法读取 null 的属性（读取 'style'）”。我似乎遇到的另一个问题是我在第二页重新加载时丢失了本地存储！如果您有改进方法或更好的方法来解决此问题，请告诉我！谢谢

更新代码
这是最有效的版本 link https://codesandbox.io/s/festive-rui-vz7tf?file=/src/App.js 我添加了一个“删除历史按钮”。现在唯一的问题是在重新加载并选择另一个按钮后，本地存储被新选择完全删除。我需要的是要堆叠的选择，直到用户运行 localStorage.clear().

import React,{useState,useEffect} from 'react';


      const App=()=> {
  const [btns, setBtns] = useState([]);

  useEffect(() => {
    localStorage.setItem('BtnsClicked', JSON.stringify({ btns }));
  }, [btns]);


  const handleAcknowledge=(event)=>{
    setBtns([...btns, event.target.id])
  
    event.target.style.backgroundColor = "red"
    event.target.innerHTML = "Clicked!"
  }

  const reSelectBtns=()=>{
    const storedBtns = JSON.parse(localStorage.getItem('BtnsClicked'));
    
    if (storedBtns.btns.length){
      storedBtns.btns.forEach(btn=>{
        console.log(document.getElementById(btn).style.backgroundColor = "red")
    })
  }
  }
  reSelectBtns()

  return (
    <div className="App">
     
      <button id = "1" onClick={handleAcknowledge}>Acknowledge</button> 
      <button id = "2" onClick={handleAcknowledge}>Acknowledge</button> 
      <button id = "3" onClick={handleAcknowledge}>Acknowledge</button>  
      <button id = "4" onClick={handleAcknowledge}>Acknowledge</button>  
      
    </div>
  );
}

export default App;

Answer 1

检查我的 link 这个沙箱 https://codesandbox.io/s/blissful-marco-7wgon?file=/src/App.js

它解决了您的问题。

React Local Storage 以定位先前选择的按钮

React Local Storage to target previously selected buttons

javascript

css

styles

local-storage

reactjs