问题描述
我正在使用 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;
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)