React-Semantic UI 调度事件不起作用

Question

我正在创建一个带有反应语义 UI 的文本输入，当单击按钮时将输入文本。一切都运行良好，只是此操作不会触发onchange事件，因此不会更新状态。

这是我将文本附加到输入的函数

const putTextAtCursor = (text, inputID) => {

  let inputElement = document.getElementById(inputID);

  console.log({ inputElement, inputID });

  let cursorPosition = 0;

  if (document.selection) {

    inputElement.focus();

    let selectionRange = document.selection.createRange();

    selectionRange.moveStart("character", -inputElement.value.length);

    cursorPosition = selectionRange.text.length;

  } else if (

    inputElement.selectionStart ||

    inputElement.selectionStart == "0"

  ) {

    cursorPosition = inputElement.selectionStart;

  }

  let origValue = inputElement.value;

  let newValue =

    origValue.substr(0, cursorPosition) +

    text +

    origValue.substr(cursorPosition);

  inputElement.value = newValue;

  let start = inputElement.selectionStart;

  inputElement.selectionStart = inputElement.selectionEnd = start + text.length;

  let event = new UIEvent("change");

  inputElement.dispatchEvent(event);

  inputElement.focus();

};

在dispatchEvent似乎没有被解雇。完整演示在这里

如何解决这个问题？