在 React 应用程序中处理侧栏时遇到问题

如何解决在 React 应用程序中处理侧栏时遇到问题

我正在使用 close 变量在我的 React 应用程序中展开和折叠侧边栏，具体取决于它的 true 或 false 值。侧边栏包含一些笔记卡片。我想在单击“添加”或“更新”按钮时使用侧边栏。同样，我想在单击任何备注卡时关闭侧边栏。

问题出在添加或更新笔记之后。当我点击卡片侧边栏时不会关闭。但是它会在第三次点击同一项目时关闭。

可能是因为每个单独的卡片都有多个切换功能同时工作。我不知道如何解决这个问题。

App.js

import React,{useState} from 'react';
import './App.css';

// IMPORTING COMPONETS
import Nav from './components/Nav';
import Side from './components/Side';
import NotesDetail from './components/NotesDetail';

function App() {

  return (
    <div className="App">
      <Home />
    </div>
  );
}

export default App;
const Home = () => {

  const [inputText,setInputText] = useState("");
  const [inputTitle,setInputTitle] = useState("");
  const [id,setId] =useState("");
  const [notes,setNotes] = useState([]);

  //JAVASCRIPT EVENTS
  var close = true;
  const toggleSide = () => {
    if (close) {
      document.getElementsByClassName("sidebar")[0].style.left = "0%";
      document.getElementById("grid-btn").style.marginLeft = "65%";
    }
    else {
      document.getElementsByClassName("sidebar")[0].style.left = "-60%";
      document.getElementById("grid-btn").style.marginLeft = "0%";
    }
    close = !close
  }


  return (
    <div>
      <Nav/>
      <div className="main">
        <div className="sidebar" id="sidebar">
          <Side
            notes={notes}
            setNotes={setNotes}
            setInputText={setInputText}
            setInputTitle={setInputTitle}
            setId={setId}
            toggleSide={toggleSide}
            close={close}
          />
        </div>
        <div className = "notes-detail">
          <NotesDetail
            notes={notes}
            setNotes={setNotes}
            inputText={inputText}
            setInputText={setInputText}
            inputTitle={inputTitle}
            setInputTitle={setInputTitle}
            id={id}
            setId={setId}
            toggleSide={toggleSide}
            close={close}
          />
        </div>
      </div>
    </div>
  );
}

NotesDetail.js

const NotesDetail = ({inputText,setInputText,inputTitle,setInputTitle,notes,setNotes,displayNote,id,setId,close,toggleSide}) => {

  const submitHandler = () => {
    if (inputText || inputTitle) {
      const newcopyNotes = [...notes];
      newcopyNotes.splice(0,{
        title: inputTitle,text: inputText,id: Math.random() * 1000
      });
      setNotes([...newcopyNotes]);
      if (close) toggleSide();
    } else {
      alert("Notes are Empty. Type something in the textarea.");
    }
    setInputText("");
    setInputTitle("");
    setId("");
  };

  const resetHandler = () => {
    if (inputText==="" && inputTitle==="" || id!=="") {
      setInputText("");
      setInputTitle("");
      setId("");
    }
    else {
      if (window.confirm("Are you sure? Unsaved work will be lost.")) {
        setInputText("");
        setInputTitle("");
        setId("");
      } else {
        return
      }
    }
  }

  const updateHandler = () => {

    if (inputText || inputTitle) {
      const newcopyNotes = notes.filter(el => el.id !== id);
      setNotes([
        { title: inputTitle,id: Math.random() * 1000 },...newcopyNotes
      ]);
    } else {
      alert('Notes are Empty. Type something in textarea.');
    }
    setInputText('');
    setInputTitle('');
    setId('');

    if (close) toggleSide();
  }


  return (
    <div className="container">
      <div>
        <button id="grid-btn" onClick={toggleSide}>
          <i className="fas fa-border-all"></i>
        </button>
      </div>
      <div className="add-update-reset">
        {(id===""?
        <button
          className="btn btn-primary"
          id="add-btn"
          onClick={submitHandler}>
          Add
        </button>
        :
        <button
          className="btn btn-success"
          id="update-btn"
          onClick={updateHandler}>
          Update
        </button>
        )}
        <button
          className="btn btn-danger"
          id="reset-btn"
          onClick={resetHandler}>
          Reset
        </button>
      </div>
      <h4><textarea
        id="titlearea"
        value={inputTitle}
        onChange={(e)=>setInputTitle(e.target.value)}
        placeholder="Title"
      /></h4>
      <textarea
        id="textarea"
        value={inputText}
        onChange={(e)=>setInputText(e.target.value)}
        placeholder="Type the notes here..."
      />
    </div>
  );
}

export default NotesDetail;

Side.js

import NotesCard from './NotesCard';

const Side = ({setInputText,toggleSide,close}) => {

  return (
    <div className="container">
      <div className="side-options"></div>
      <div>
        {notes.map((note)=> (
          <NotesCard
            note={note}
            key={note.id}
            setInputText={setInputText}
            setInputTitle={setInputTitle}
            setNotes={setNotes}
            notes={notes}
            setId={setId}
            toggleSide={toggleSide}
            close={close}
          />
          ))
        }
      </div>
    </div>
  );
}

export default Side;

NotesCard.js

const NotesCard = ({setInputText,note,toggleSide}) => {

  const displayHandler = () => {
    setInputText(note.text);
    setInputTitle(note.title);
    setId(note.id);
    toggleSide();
  }
  const deleteHandler = () => {
    if (window.confirm("Are you sure you want to delete?")) {
      setNotes(notes.filter((el) => el.id !== note.id));
    }
  };

  return (
    <div className="notes">
      <div className="notes-card">
        <div className="card-options">
          <button id="trash-btn" onClick={deleteHandler}>
            <i className="fas fa-trash"></i>
          </button>
        </div>
        <div onClick={displayHandler}>
          <h5 id="note-title">
            {note.title.length>30
              ?note.title.substring(0,30)+"..."
              :note.title}
          </h5>
          <p id="note-content">
            {note.text.length>150
              ?note.text.substring(0,150)+"..."
              :note.text}
          </p>
        </div>
      </div>

    </div>
  );
};

export default NotesCard;