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

Question

我正在使用 React Semantic 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 似乎没有被触发。完整演示为here

如何解决这个问题？

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