浏览器插件如何触发 react 组件变更

68 
export const triggerInputChange = (node: any, value: string = '') => {
  const inputTypes = [
    window.HTMLInputElement,
    window.HTMLSelectElement,
    window.HTMLTextAreaElement
  ]
  // only process the change on elements we know have a value setter in their constructor
  if (inputTypes.indexOf(node.__proto__.constructor) > -1) {
    const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set
    const event = new Event('input', { bubbles: true })
    const event3 = new Event('blur', { bubbles: true })

    setValue.call(node, value)
    node.dispatchEvent(event)
    node.dispatchEvent(event3)
  }
}

PS：遇到一个 Select 组件，发现修改的办法为先聚焦，再触发mouseDown此时 选项框就会出现，再去点击对应的选项即可 

// 这个node 是 .auxo-select-selector 获取到的 dom
export const triggerSelectChange = (node: (any | HTMLElement), value: number = 1) => {
  node.dispatchEvent(new Event('focus', { bubbles: true }))
  node.dispatchEvent(new Event('mousedown', { bubbles: true }))
  const selectDropDownId = $(node).find('input').attr('id')
  const $selectDropDown = $(`#${selectDropDownId}_list`).next()

  setTimeout(() => {
    const $targetOption = $selectDropDown.find(`.auxo-select-item-option[title="${value}"]`)
    $targetOption.trigger('click')
  }, 100)
}
Comments
Write a Comment