下面是我的代码，因为现在它的工作完美，但我不能添加一个搜索栏它。我是React.js的新手，我尝试了许多解决方案，但没有得到解决方案，我还需要一个更新和删除按钮的功能。提前感谢
import React from "react";
import { db } from "../firebase";
import "../App.css";
function TillDateData() {
const [contacts, setContacts] = React.useState([]);
React.useEffect(() => {
const fetchData = async () => {
const data = await db.collection("contacts").orderBy("createdDate").get();
setContacts(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};
fetchData();
}, []);
return (
<div className="myclass">
<table className="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">City</th>
<th scope="col">Contact No.</th>
<th scope="col">Date</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{Object.keys(contacts).map((id) => {
return (
<tr key={id}>
<td>{contacts[id].name}</td>
<td>{contacts[id].email}</td>
<td>{contacts[id].city}</td>
<td>{contacts[id].contact}</td>
<td>{contacts[id].createdDate}</td>
<td>
<button className="btn btn-primary btn-sm">Edit</button>
</td>
<td>
<button className="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
export default TillDateData;
import React, { useState } from "react";
import { db, fire } from "../firebase";
import "../App.css";
function TillDateData() {
const [search, setSearch] = useState("");
const [users, setUsers] = React.useState([]);
const [contactsData, setContactsData] = useState(users); //iterate this in table
const deleteContact = (id) => {
db.collection('users').doc(id).delete()
};
const changeSearch = (val) => {
setSearch(val);
if (val != "") {
setContactsData(
users.filter((contact) => {
contact.name.toLowerCase().includes(val.toLowerCase()) ||
contact.email.toLowerCase().includes(val.toLowerCase()) ||
contact.city.toLowerCase().includes(val.toLowerCase()) ||
contact.number.toLowerCase().includes(val.toLowerCase());
})
);
} else {
setContactsData(users);
}
};
React.useEffect(() => {
const fetchData = async () => {
const data = await db.collection("users").orderBy("createdDate").get();
setUsers(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};
fetchData();
}, []);
return (
<>
<input type="text" onChange={(e) => changeSearch(e.target.value)} />
<div className="myclass">
<table className="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">City</th>
<th scope="col">Contact No.</th>
<th scope="col">Date</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{Object.keys(contactsData).map((id) => {
return (
<tr key={id}>
<td>{users[id].name}</td>
<td>{users[id].email}</td>
<td>{users[id].city}</td>
<td>{users[id].number}</td>
<td>{users[id].createdDate}</td>
<td>
<button className="btn btn-primary btn-sm">Edit</button>
</td>
<td>
<button
className="btn btn-danger btn-sm"
onClick={()=> deleteContact(contact[id].id)}
>
Delete
</button>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</>
);
}
export default TillDateData;
只是改变了一些变量保持不变
经过一番努力，我找到了一种如何在firestore检索数据中添加搜索栏功能的方法。这是我的代码
import React, { useState, useEffect } from "react";
import { db } from "../firebase";
import "../App.css";
function RetrieveData() {
const [contacts, setContacts] = useState([]);
const [search, setSearch] = useState("");
const [filteredContacts, setFilteredContacts] = useState([]);
useEffect(() => {
const fetchData = async () => {
const data = await db.collection("contacts").orderBy("createdDate").get();
setContacts(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};
fetchData();
}, []);
useEffect(() => {
setFilteredContacts(
contacts.filter(
(user) =>
user.name.toLowerCase().includes(search.toLowerCase()) ||
user.city.toLowerCase().includes(search.toLowerCase())
)
);
}, [search, contacts]);
return (
<>
<div className="App">
<h1>Contact Details</h1>
<input
type="text"
placeholder="Search"
onChange={(e) => setSearch(e.target.value)}
/>
</div>
<div>
{filteredContacts.map((contact) => [
<ol>
<b>Consumer Details :</b> {<br />}
{contact.name},{<br />}
{contact.email},{<br />}
{contact.city},{<br />}
{contact.contact},{<br />}
</ol>,
])}
</div>
</>
);
}
export default RetrieveData;
要删除更新，请尝试以下代码
const deleteContact = (id) => {
//Delete contact with the passed id
}//same for update or edit contacts
<tr>
....
<td><button onClick={()=> deleteContact(contact[id].id)}></td>//same for
update
</tr>
搜索栏
搜索栏执行以下步骤
1-使搜索状态
const [search, setSearch] = useState('')
const [contacts, setContacts] = useState([])//used just to store contacts from api
const [contactsData, setContactsData] = useState(contacts)//iterate this in table
2-写一个searchChange处理程序
const changeSearch = (val) => {
setSearch(val)
if(val!=''){
setContactsData(contacts.filter(constact => {
contact.name.includes(val) ||
contact.fname.includes(val)//same other fields added by following OR
condition
}))
}
else{
setContactsData(contacts)
}
}
3-创建一个搜索文本字段
<input type='text' onChange={(e)=> changeSearch(e.target.value)}
注意:使用Objects.keys (contactsData)。更新后的地图
更新和删除函数
1- for update
const UpdateContent = (id) => {
//call an api that delete the content from DB(firebase) for the provided id in parameters or in body.
}
组件:
<tr>
删除功能也在答案的顶部部分描述…