自动重置移动应用中的所有字段答案

【问题标题】：reset all fields in mobile app automatically自动重置移动应用中的所有字段
【发布时间】：2020-03-14 02:33:09
【问题描述】：

我正在编写一个 Vue Native 应用程序，并尝试使用 event.target.reset() 在应用程序加载时将字段重置为其原始值，根据适用于 VueJS in this thread 的 @Vladimir Salguero 的帖子。但是，这会导致按下重置按钮时手机上出现以下错误消息：TypeError: event.target.reset is not a function。（在'event.target.reset()'中，'event.target.reset'是未定义的）

这是位于<script>标签中的重置方法：

export default {
methods: {
    reset(event) { 
      // console.log(event);
      event.target.reset();
    }
  }
}

这是从<template> 标签中调用它的方式：

<nb-col>
  <nb-button rounded :onPress="reset">
    <nb-text>Reset</nb-text>
  </nb-button>
</nb-col>

[Native Base 也被用于 UI 组件，因此标签中的 nb 前缀]。

当reset() 方法中的// console.log(event); 行启用时，它会在控制台中显示以下信息：

Class {
  "_dispatchInstances": FiberNode {
    "tag": 5,
    "key": null,
    "type": "RCTView",
  },
  "_dispatchListeners": [Function bound touchableHandleResponderRelease],
  "_targetInst": FiberNode {
    "tag": 5,
    "key": null,
    "type": "RCTView",
  },
  "bubbles": undefined,
  "cancelable": undefined,
  "currentTarget": 435,
  "defaultPrevented": undefined,
  "dispatchConfig": Object {
    "dependencies": Array [
      "topTouchCancel",
      "topTouchEnd",
    ],
    "registrationName": "onResponderRelease",
  },
  "eventPhase": undefined,
  "isDefaultPrevented": [Function functionThatReturnsFalse],
  "isPropagationStopped": [Function functionThatReturnsFalse],
  "isTrusted": undefined,
  "nativeEvent": Object {
    "changedTouches": Array [
      [Circular],
    ],
    "identifier": 0,
    "locationX": 41,
    "locationY": 12,
    "pageX": 226,
    "pageY": 433,
    "target": 433,
    "timestamp": 6019178,
    "touches": Array [],
  },
  "target": 433,
  "timeStamp": 1584151959763,
  "touchHistory": Object {
    "indexOfSingleActiveTouch": 0,
    "mostRecentTimeStamp": 6019178,
    "numberActiveTouches": 0,
    "touchBank": Array [
      Object {
        "currentPageX": 226,
        "currentPageY": 433,
        "currentTimeStamp": 6019178,
        "previousPageX": 226,
        "previousPageY": 433,
        "previousTimeStamp": 6019176,
        "startPageX": 226,
        "startPageY": 433,
        "startTimeStamp": 6019103,
        "touchActive": false,
      },
    ],
  },
  "type": undefined,
}

显然，此事件中没有reset。那么，如何在不添加代码手动重置每个字段的情况下自动重置应用中的所有字段？

【问题讨论】：

标签： javascript react-native vue.js vue-native

【解决方案1】：

尝试重置表单，而不是元素：

event.currentTarget.form.reset();

【讨论】：

我试过了，它给出了这个错误 TypeError: undefined is not an object (evaluating 'event.currentTarget.form.reset')
我也试过event.currentTarget.reset();，它给出了这个错误TypeError: event.currentTarget.reset is not a function。（在'event.currentTarget.reset()'中，'event.currentTarget.reset'是未定义的）
这意味着您的元素不在表单中。要自动重置元素，您需要将其放入表单并重置表单。不过，这可能是一笔开销——为什么不直接为某个东西设置一个值呢？
我希望找到一种方法让所有字段自动重置。
哦，所以只需将它们包装在 <form> 中并使用我的代码 sn-p :) 不确定您将如何使用您的活动，您可能需要 currentTarget 或 target .