在本教程中，我们将告诉你如何使用 Meteor 的表单。



文本输入


首先，我们将创建一个 form 元素中文本输入字段和提交按钮。


meteorApp/import/ui/meteorApp.html

<head>
   <title>meteorApp</title>
</head>

<body>
   <div>
      {{> myTemplate}}
   </div>
</body>

<template name = "myTemplate">
   <form>
      <input type = "text" name = "myForm">
      <input type = "submit" value = "SUBMIT">
   </form>
</template>


在JavaScript文件中，我们将创建 submit 事件。我们需要防止默认事件的行为以停止刷新浏览器。下一步，我们要使用输入字段的内容，并将其文本值赋值给变量 textValue 。 在这个例子中，我们只记录了内容输出到开发者控制台。最后一件事是明确的输入字段。

meteorApp/client/main.js



import { Template } from 'meteor/templating';
Template.myTemplate.events({
  'submit form': function(event){
     event.preventDefault();
     var textValue = event.target.myForm.value;
     console.log(textValue);
     event.target.myForm.value = "";
  }
});

当我们在输入栏中键入“一些文字...”，然后点击提交。控制台将记录下我们输入的文本。

Meteor表单_字段

单选按钮


类似的概念，我人使用单选按钮。


 

meteorApp/import/ui/meteorApp.html

<head>
   <title>meteorApp</title>
</head>

<body>
   <div>
      {{> myTemplate}}
   </div>
</body>

<template name = "myTemplate">
   <form>
      <input type = "radio" name = "myForm" value = "form-1">FORM 1
      <input type = "radio" name = "myForm" value = "form-2">FORM 2
      <input type = "submit" value = "SUBMIT">
   </form>
</template>


 

meteorApp/client/main.js



import { Template } from 'meteor/templating';
Template.myTemplate.events({
  'submit form': function(event){
     event.preventDefault();
     var radioValue = event.target.myForm.value;
     console.log(radioValue);
  }
});

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

Meteor表单_复选框_02

Checkbox - 复选框


下面的例子演示了如何使用复选框。可以看到我们只是重复同样的过程。


 

meteorApp/import/ui/meteorApp.html

<head>
   <title>meteorApp</title>
</head>

<body>
   <div>
      {{> myTemplate}}
   </div>
</body>

<template name = "myTemplate">
   <form>
      <input type = "checkbox" name = "myForm" value = "form-1">FORM 1
      <input type = "checkbox" name = "myForm" value = "form-2">FORM 2
      <input type = "submit" value = "SUBMIT">
   </form>
</template>


 

meteorApp/client/main.js



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);
  }
});

当提交表单，虽然它们未选中一个那么将会被记录为 false，如果有选中一个检查输入将被记录为 true 。

Meteor表单_字段_03

下拉选项

在这个例子中，我们将展示如何使用select元素。我们将使用更改事件，以每次变化更新数据的选项。

 

meteorApp/import/ui/meteorApp.html

<head>
   <title>meteorApp</title>
</head>

<body>
   <div>
      {{> myTemplate}}
   </div>
</body>

<template name = "myTemplate">
   <select>
      <option name = "myOption" value = "option-1">OPTION 1</option>
      <option name = "myOption" value = "option-2">OPTION 2</option>
      <option name = "myOption" value = "option-3">OPTION 3</option>
      <option name = "myOption" value = "option-4">OPTION 4</option>
   </select>
</template>


 

meteorApp/client/main.js

if (Meteor.isClient) {

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

}


如果选择第三个选项，那么控制台将记录选项值。

Meteor表单_复选框_04