📌  相关文章
📜  Meteor-表格

📅  最后修改于: 2020-12-08 05:20:36             🧑  作者: Mango

在本章中，我们将学习如何使用流星表单。

文字输入

首先，我们将创建一个带有文本输入字段和一个提交按钮的表单元素。

meteorApp.html

meteorApp

 

   

      {{> myTemplate}}

在一个JavaScript文件中，我们将创建Submit事件。我们需要防止默认事件行为来阻止浏览器刷新。接下来，我们将获取输入字段的内容，并将其分配给textValue变量。

在以下示例中，我们将仅将该内容记录到开发人员控制台。最后，我们需要清除输入字段。

meteorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'submit form': function(event) {
         event.preventDefault();
         var textValue = event.target.myForm.value;
         console.log(textValue);
         event.target.myForm.value = "";
      }
   });
}

当我们在输入字段中输入“ Some text …”并提交时，控制台将记录我们输入的文本。

流星形式文本

单选按钮

类似的概念可以用于单选按钮。

meteorApp.html

meteorApp

 

   

      {{> myTemplate}}

meteorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'submit form': function(event) {
         event.preventDefault();
         var radioValue = event.target.myForm.value;
         console.log(radioValue);
      }
   });
}

当我们提交第一个按钮时，控制台将显示以下输出。

流星形式电台

选框

以下示例显示了如何使用复选框。您可以看到我们只是在重复相同的过程。

meteorApp.html

meteorApp

 

   

      {{> myTemplate}}

meteorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({
   
      'submit form': function(event) {
         event.preventDefault();
         var checkboxValue1 = event.target.myForm[0].checked;
         var checkboxValue2 = event.target.myForm[1].checked;
         console.log(checkboxValue1);
         console.log(checkboxValue2);
      }
   });
}

提交表单后，选中的输入将记录为true ，而未选中的输入将记录为false 。

流星形式复选框

选择下拉菜单

在下面的示例中，我们将学习如何使用select元素。每当选项更改时，我们将使用change事件更新数据。

meteorApp.html

meteorApp

 

   

      {{> myTemplate}}

meteorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'change select': function(event) {
         event.preventDefault();
         var selectValue = event.target.value;
         console.log(selectValue);
      }
   });
}

如果我们选择第三个选项，则控制台将记录该选项的值。

流星形式选择