0

我正在编写一个 Vue Native 应用程序,并尝试event.target.reset()在应用程序加载时将字段重置为其原始值,根据 @Vladimir Salguero 的帖子,该帖子适用于该线程中的 VueJS 。但是,这会导致按下重置按钮时手机上出现以下错误消息: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标签中的前缀]。

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

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在这个事件中没有。那么,如何在不添加代码手动重置每个字段的情况下自动重置应用程序中的所有字段?

4

1 回答 1

0

尝试重置表单,而不是元素:

event.currentTarget.form.reset();
于 2020-03-14T02:35:27.717 回答