现在，让我们打开浏览器，看看组件的外观：
Firebase 在我们的应用程序中工作得非常好，您可以看到标题“Hello world！这是我的第一个 Javascript Firebase 应用程序”底部显示的消息；它来自 Firebase 实时数据库
此外，在控制台中，您可以在提交表单时看到这些值。
现在我们需要将这些值保存到数据库中：
//React form data object
var data = {
date: Date(),
email:this.refs.email.value.trim(),
issueType:this.refs.issueType.value.trim(),
department:this.refs.department.value.trim(),
comments:this.refs.comment.value.trim()
}
我们对 Firebase 实时数据库的Write数据对象执行此操作；firebase.database.Reference是从 Firebase 检索数据的异步侦听器。此侦听器将在其初始状态和数据更改时触发一次。
We can Read and Write the data from Firebase Database if we have access for that, because, by default, the database is restricted and no one can access it without setting up the authentication.
firebaseDb.ref().child('helpdesk').child('tickets').push(data);
在前面的代码中，我们使用push()方法将数据保存到 Firebase 数据库中。每次将新子级添加到指定的 Firebase 引用时，它都会生成唯一密钥。我们也可以使用set()方法保存数据以供指定参考；它将替换该节点路径上的现有数据：
firebaseDb.ref().child('helpdesk').child('tickets').set(data);
对于Retrieve添加数据时的更新结果，我们需要使用on()方法连接监听器，或者在任何情况下，如果我们想要分离特定节点上的监听器，那么我们可以调用off()方法：
firebaseDb.ref().on('child_added', function(snapshot) {
var data = snapshot.val();
snapshot.forEach(function(childSnap) {
console.log(childSnap.val());
this.refs.form.reset();
console.log("Ticket submitted successfully");
});
});
但是，如果我们想在没有听到变化的情况下阅读一次，我们可以使用once()方法：
firebaseDb.ref().once('value').then(function(snapshot){
});
当我们不希望数据发生任何变化或进行任何积极的监听时，这非常有用。例如，当用户配置文件数据在我们的应用程序中成功通过认证时，在初始加载时加载该数据。
要更新数据，我们有update()方法，要删除数据，我们只需要在数据所在的位置调用delete()方法。
Both the update() and set() methods return a Promise, so we can use that to know when the write is committed to the database.
现在，让我们提交表单并在浏览器控制台中查看输出：
看起来很棒；现在，让我们来看看我们的 Firebase database：
我们可以看到我们从 ReactJS 表单提交的数据。
现在我们将以表格格式显示这些数据；为此，我们需要创建另一个 React 组件并设置组件的初始状态：
constructor(){
super();
this.state = {
tickets:[]
}
}
现在，使用componentDidMount()方法，我们将通过ref()调用数据库，迭代对象，并使用this.setState()设置组件的状态：
componentDidMount() {
var itemsRef = firebaseDb.ref('/helpdesk/tickets');
console.log(itemsRef);
itemsRef.on('value', (snapshot) => {
let tickets = snapshot.val();
console.log(tickets);
let newState = [];
for (let ticket in tickets) {
newState.push({
id:tickets[ticket],
email:tickets[ticket].email,
issueType:tickets[ticket].issueType,
department:tickets[ticket].department,
comments:tickets[ticket].comments,
date:tickets[ticket].date
});
}
this.setState({
tickets: newState
});
});
},
现在，我们将在 render 方法内的表中迭代票证的状态：
render() {
return (
Email
Issue Type
Department
Comments
Date
{
this.state.tickets.map((ticket) =>
{ return (
)})
{ticket.email}
{ticket.issueType}
{ticket.department}
{ticket.comments}
{ticket.date}
}
)}
现在，每当向数据库中添加新票证时，用户都可以实时查看票证列表：
以下是我们 HTML 页面的标记：viewTickets.html：
View Tickets
这是添加到 Firebase 实时数据库中的票证列表：
在本章中，我们了解了 JSX 如何在 React 中创建自定义组件以及使它们非常易于可视化、理解和编写方面发挥重要作用。我们还看到了道具和状态如何在使组件交互以及在 DOM 交互中发挥重要作用，以从表单字段中获取值。在refs的帮助下，我们可以调用任何公共方法并向特定的子实例发送消息。
此外，我们还通过创建一个Add Ticket form，探索了 React 引导组件，它在所有预期的设备以及桌面浏览器上都能很好地工作。
此外，我们还看到了将 Firebase 实时数据库与 ReactJS 应用程序结合使用是多么容易。只需几行代码，我们就可以将数据保存到实时数据库中，并从数据库中实时检索票证列表，从而使我们的应用程序具有实时性。
在下一章中，我们将在 node.js 环境中进行 React 和 Firebase 设置，以及如何使用 Firebase OAuth 提供程序在应用程序中添加认证。我们还将探讨导航的 React 路由
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 
