本帖最后由 lijialong1313 于 2024-12-16 22:46 编辑
我最近遇到了个问题，就是纯使用js，没办法模拟输入，在antd官网上的测试用例也发现了这个问题。
然后我尝试了网上大多流行的说的这些那些例如说触发什么change、input、focus、key的，均不可以。
为什么不可以呢，因为它压根没有绑定这个事件。
但是你输入也确实可以触发，所以想要js绕过还是很麻烦的。
然后，经过我苦心查找。
https://blog.csdn.net/qq_17627195/article/details/134166737
中的：
[JavaScript] 纯文本查看 复制代码 // 获取 input 输入框的dom对象
var element_input = window.document.querySelector('input');
// JavaScript 中的 `_valuetracker` 方法常常用于监听 HTML 表单元素（如 input，select，textarea 等）的值变化，并在每次值发生变化时执行回调函数。
if (element_input._valueTracker) var _templMethod = element_input._valueTracker.getValue;
if (element_input.getValue) var _templMethod = element_input.getValue;
if (element_input._valueTracker) element_input._valueTracker.getValue = () => '';
// 修改input的值
element_input.value = '123';
// 设置输入框的 input 事件
var event = new InputEvent('input', {
'bubbles': true, // 表示事件对象是否冒泡
'cancelable': true, // 表示事件是否可以被取消，即能否用Event.preventDefault()取消这个事件。
});
// 触发 dom 对象的 input 事件
element_input.dispatchEvent(event);
// 将`_valuetracker`的值（方法）重新绑定
if (element_input._valueTracker) element_input._valueTracker.getValue = _templMethod;
这段代码是可以的。
但是这段代码没有详细解释它为什么可以。
因此在这里特别解释和介绍一下：
首先，网上说的什么”规范“什么”要求“，目前来说可以当它啥都没说。实际原因是Antd（应该是React）自己写了一个_valueTracker（或者getValue）方法，去进行底层的捕获。这个东西默认还不会显示出来。
所以逻辑就变得很简单了，其实就是我们找到了这个对象，直接捕获屏蔽了 它的方法，执行了操作之后重新绑定，就这么简单。
更新：
发现写的时候没讲的很清楚，我这里重新详细说一下。
首先，目前知道这个是React的一个写法，其他的不知道有没有。
其次，这个东西其实是React直接挂了一个最底层的input监听捕获，只要打开上级就可以全部看到。而我们通常只对input本身进行操作，因此在没有这个方法的时候触发不了。
最后，解决方案有2个办法。
1就是我上面提到的，直接中间过一轮。
2就是 https://www.52pojie.cn/forum.php?mod=viewthread&tid=1901376&page=1#pid49771019 提到的直接使用模拟方式并调用setValue设置值。
| 
发表于 2024-12-16 17:48
