JS脚本如何触发react的input绑定的onChange事件

本文链接：https://blog.csdn.net/AuroraFaye/article/details/139475017

react的input的onChange事件和原生的onchange事件是不同的，如果用原生的去派发change事件是没法触发的，其中区别指出的细节可以自己搜资料，现在直接上解决方案。

如何在React应用中绕过React的事件处理，直接设置输入框的值，并触发input事件。请注意，这个脚本应该在浏览器的控制台中执行，并且假设您已经有一个输入框元素存在于页面上。

// 函数：模拟在输入框中的输入
function simulateInputAndTriggerChange(inputElement, value) {
  // 获取HTMLInputElement原型上的value属性的setter
  var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;

  // 使用原生的value setter来设置输入框的值
  nativeInputValueSetter.call(inputElement, value);

  // 创建一个新的input事件，设置为冒泡
  var inputEvent = new Event('input', { bubbles: true });

  // 在输入框元素上分派input事件，这将触发React的onChange处理程序
  inputElement.dispatchEvent(inputEvent);
}

// 选择页面中的输入框元素
var inputElement = document.querySelector('input[type="text"]'); // 根据实际情况调整选择器

// 调用函数，模拟输入操作和事件触发
simulateInputAndTriggerChange(inputElement, '新的输入值');

这个脚本定义了一个simulateInputAndTriggerChange函数，它接受两个参数：inputElement是页面中的输入框元素，value是您想要设置的新值。函数首先获取了HTMLInputElement原型上的value属性的setter方法，然后使用这个方法来设置输入框的值。之后，它创建并分派了一个input事件，以模拟用户输入。