背景
在 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
这个问题也在以下链接中有所讨论: