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

Question

我正在創建一個帶有react語義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似乎沒有被觸發。 完整的演示在這里

如何解決呢？

Answer 1

您應該使用以下代碼：

let input = inputElement;
let lastValue = input.value;
input.value = newValue;
let event = new Event('input', { bubbles: true });
let tracker = input._valueTracker;
if (tracker) {
    tracker.setValue(lastValue);
}
input.dispatchEvent(event);

相反，這是：

  inputElement.value = newValue;
  let start = inputElement.selectionStart;
  inputElement.selectionStart = inputElement.selectionEnd = start + text.length;
  let event = new UIEvent("change");
  console.log(inputElement.onchange, "io");
  inputElement.dispatchEvent(event);

這是因為React版本。 理解這種情況的一切都在這篇文章中： https : //github.com/facebook/react/issues/11488