如何通过 JS 设置React 页面下 textarea/input 元素输入值

背景

在 React（或者其他 JS 框架）页面下，直接使用 element.value = value 的方式赋值是无效的，value 无法正确的设置。

解决方案

为了解决这个问题，可以使用以下代码来设置元素的值：

const setNativeValue = (el, value) => {
  const previousValue = el.value;

  if (el.type === 'checkbox' || el.type === 'radio') {
    if ((!!value && !el.checked) || (!!!value && el.checked)) {
      el.click();
    }
  } else el.value = value;

  const tracker = el._valueTracker;
  if (tracker) {
    tracker.setValue(previousValue);
  }

  // 'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
  el.dispatchEvent(new Event('change', { bubbles: true }));
}

参考issue

这个问题也在以下链接中有所讨论：

• https://github.com/facebook/react/issues/11488
• https://stackoverflow.com/questions/40894637/how-to-programmatically-fill-input-elements-built-with-react