Material的TextField验证和onChange事件处理程序似乎不像预期的那样工作

Question

我正在使用React和 matter UI‘s TextField with type='number'，但正如我所看到的，验证相当简单，它只允许任何可能代表数字[0-9\.eE-]*的部分字符，允许输入如下：eee---...e---0.-1，我决定实现自己的验证。(不确定这种琐碎的验证是实质性的--UI的还是HTML本机的，但无论如何也不重要)

因此，我编写了这个正则表达式以进行验证，但一旦输入一个与正则表达式不匹配的字符， my onChange 事件处理程序就根本不会被调用，而且该组件似乎控制并应用了它的基本验证。在更正输入并使其与正则表达式匹配之前，不会再次调用我的事件处理程序。

--我能阻止组件这样做吗？

onValueChange = (ev) => {
    if( /^-?(\d+)?(\.\d*)?$/.test(ev.target.value)) {
        this.setState({ value: ev.target.value });
    }

完整代码：https://codepen.io/anon/pen/eoZOaE?editors=1000

Answer 1

(不确定这种琐碎的验证是实质性的-UI还是HTML本机，但无论如何都不重要)

这种简单的验证是本机的，因为Material InputBase组件只将type='number'传输到本机<input />，而不定义任何附加的验证。

而且似乎onchange事件并不是在每个输入上都会触发-也是本机输入的行为。您可以在本例中检查它：https://codesandbox.io/s/20z5qrnqq0?fontsize=14 (正如您可以看到的) onChange事件也是只为“有效”字符触发的。

我试图找到一些其他解决方案，使用oninput HTML5事件，就像建议的here那样，但是它也不起作用。因此，在这种情况下，我认为使用type='text'输入来控制所有可能的输入是正确的决定。