Material-UI 的 TextField 验证和 onChange 事件处理程序似乎无法按预期工作

Question

我正在使用React和Material-UI的TextField type='number'但正如我所看到的，验证相当简单，它只允许任何可以表示数字[0-9.eE-]*的一部分的字符，允许这样的输入： eee---...e---0.-1，我决定实现自己的验证。(不确定这个微不足道的验证是 Material-UI 还是 HTML 原生的，但无论如何都没关系(

所以我写了这个正则表达式进行验证，但是一旦我输入一个与我的正则表达式不匹配的字符，我的 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

(不确定这个微不足道的验证是 Material-UI 还是 HTML 原生的，但无论如何都没关系(

此简单验证是本机的，因为 Material-UI InputBase组件仅将type='number'传输到本机<input />，并且不定义任何其他验证。

似乎onchange不会在每个输入上触发的事件 - 也是本机输入的行为。您可以在此示例中检查它：https://codesandbox.io/s/20z5qrnqq0?fontsize=14 - 如您所见 - onChange事件也仅针对"有效"字符触发。

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