翻译 Meteor React 制作 Todos - 04 - 表单与事件
通过表单(form)添加任务在这个步骤,我们将为用户在列表上添加输入框。 首先,在App.jsx文件中 <div className="container"> <header> <h1>Todo List</h1> <!-- 添加开始 --> <form className="new-task" onSubmit={this.handleSubmit} > <input type="text" ref="textInput" placeholder="Type to add new tasks" /> </form> <!-- 添加结束 --> </header> <ul>
你能看到 现在来在 }); },// 添加开始 handleSubmit(event) { event.preventDefault(); // 通过React的ref属性找到输入框的值 var text = React.findDOMNode(this.refs.textInput).value.trim(); Tasks.insert({ text: text,createdAt: new Date() // 当前时间 }); // 复原表单 React.findDOMNode(this.refs.textInput).value = ""; },// 添加结束 render() { return ( <div className="container"> 现在你的应用有了新的输入框。现在添加任务只需要在输入框内写一点东西,然后按下 在React上监听事件正如你所看到的那样,在React中,你直接通过在组件中调用函数方法来掌控DOM事件,在事件方法的内部你可以从组件中调用元素,而只需要赋予它们一个 向集合中插入数据在事件响应函数中,我们通过调用 允许任何在客户端的数据直接传入数据库并不是很安全,现在就别管这么多了,你知道就好。在第十章我们将学习如何使我们的应用有更多的限制和更好的安全性 -- 通过定义如何使数据插入到数据库中 对任务进行排序现在,我们的代码在列表的底部,展示了所有新的任务。这对一个任务列表来说并不是非常好。因为我们正常情况下是想看到最新的数据在最顶上。 我们可以通过对结果的 我们所要做的就是在 getMeteorData() { return { tasks: Tasks.find({},{sort: {createdAt: -1}}).fetch() } }, 现在返回到浏览器确认它是不是正常运行了。任何你所添加的新的任务将会出现在列表的顶部,不再是底部了。 在下一步,我们将给待办事宜的列表添加一个非常重要的功能:已完成功能和删除功能 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |