如何创建 Dart 表单

Question

我的问题：照着书做一个Dart表单。下面，我的基本示例看起来像 JS。它工作正常，但我收到此警告：The getter value is not defined for the class Element.

我的问题：如何编写更好的 Dart 代码来避免出现此警告消息？谢谢

HTML:

<form>
    <input type="number" min="0" id="enter-x">
    <input type="number" min="0" id="enter-y">

    <input type="button" id="result" value="Submit">
    <input type="reset" id="raz" value="Reset">

    <input type="text" id="s" readonly>
</form>

飞镖：

import 'dart:html';
import 'dart:core';

main() {
    document.querySelector('#result').onClick.listen((e) {
        calculateS();
    });
}

calculateS() {
    var x = int.parse(document.querySelector('#enter-x').value);
    var y = int.parse(document.querySelector('#enter-y').value);
      var surface = (x * y).toString();
    document.querySelector('#s').value = surface;
}

Answer 1

Dart 提供提示和警告以帮助查找程序中的错误。通用 Element 没有 value 字段。 Dart 程序仍然有效并且应该按预期工作并且在运行时不会导致任何错误或警告，因为实际返回的元素是更特殊的 TextInputElement 或 NumberInputElement，它具有 value领域。

要使分析器静音，请通过添加 "cast"

使其更加清晰

calculateS() {
  var x = int.parse((document.querySelector('#enter-x') as NumberInputElement).value);
  var y = int.parse((document.querySelector('#enter-y') as NumberInputElement).value);
  var surface = (x * y).toString();
  (document.querySelector('#s') as TextInputElement).value = surface;
}

在 DartPad

试试

另请参阅：

https://api.dartlang.org/1.12.0/dart-html/InputElement-class.html
Dart 'query' explicit cast
What is the syntax for implicit cast operator in dart?
https://www.dartlang.org/docs/dart-up-and-running/ch02.html#operators

如何创建 Dart 表单

How to create a Dart form

dart