Question

使用Javascript，如何从最终用户的角度填充ReactJS表单上的输入字段？当我正常更新输入时，是否存在React侦听的特定事件序列？

我知道这是可能的，因为像1Password这样的实用程序在插入存储的标识时表现得很好，并且显然使用了键盘事件的组合。我尝试在那里找到答案，虽然他们缩小的JS代码很难理解，因为他们处理了数百个网站中的大量输入类型和边缘情况。

Answer 1

要更新文本框元素：

似乎解决方案是触发焦点事件（假设您的元素在box中被选中：

  var event = document.createEvent('FocusEvent');
  event.initEvent('focus', true, true);
  box.dispatchEvent(event);

然后遍历要键入的每个字符并触发＆＃34; textInput＆＃34;事件。在这种情况下，角色是＆＃34; 3＆＃34;：

  var event = document.createEvent('TextEvent');
  event.initTextEvent('textInput', true, true, window, "3");
  box.dispatchEvent(event);

请确保之后模糊，以防万一任何UI更新取决于您使用该框完成：

  var event = document.createEvent('FocusEvent');
  event.initEvent('blur', true, true);
  box.dispatchEvent(event);

要更新下拉元素： （其中元素为＆＃34;选择＆＃34;）

  select.value = "the option value"
  var event = document.createEvent('Event');
  event.initEvent('input', true, true)
  select.dispatchEvent(event)

  var event = document.createEvent('Event');
  event.initEvent('change', true, true)
  select.dispatchEvent(event)

将ReactJS输入字段填充为最终用户

1 个答案: