dart - 如何创建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