React中contentEditable元素e.target属性异常及快捷键冲突问题

初始问题：contentEditable元素无法通过标准方式获取name/value #

在React应用中使用带contentEditable属性的h1元素允许用户直接编辑，但在管理其他输入的useFormValues钩子中，无法像标准输入那样访问e.target.name或e.target.value属性（已明确不考虑改用标准输入）。通过Object.entries(e.target)看到所需属性在数组第二个条目里，但e.target[1][1].name的访问方式既不合理也有风险。

组件代码 #

<RecipeName
    data-test="recipePage-name"
    length={recipe.recipe.name.length}
    contentEditable={editable}
    onInput={handleChange}
    name="name"
    value={values.name || recipe.recipe.name}
    suppressContentEditableWarning={true}
>
    {recipe.recipe.name}
</RecipeName>

初始钩子处理函数 #

const handleChange = e => {
    e.persist();
    let tmp = { ...values };
    let value;
    switch (e.target.type) {
      case 'number':
        value = parseInt(e.target.value);
        break;
      case 'file':
        value = e.target.files[0];
        break;
      case 'contenteditable':
        value = e.target.innerHTML;
        break;
      default:
        value = e.target.value;
    }
    dot.str(e.target.name, value, tmp);
    setValues(tmp);
};

更新：拆分处理函数后的新问题 #

改用独立的handleContentEditable函数避免和原有handleChange冲突，代码如下：

新的contentEditable处理函数 #

const handleContentEditable = (e) => {
    e.persist();
    let tmp = { ...values };
    let name = e.target.dataset.name;
    let type = e.target.dataset.type;
    let value = e.target.innerHTML.replace(/(<br[^>]>|<br>|&nbsp;|\n|\r|\t)+/gi, "");
    if (type === 'numeric') {
      if (isNaN(String.fromCharCode(e.nativeEvent.which))) {
        e.preventDefault()
      };
      value = e.target.innerHTML.replace(/\D/g,'');
    }
    dot.str(name, value, tmp);
    setValues(tmp);
}

当前遇到的新问题：成功阻止用户输入非数字字符的同时，也屏蔽了Ctrl+A全选功能（因为"A"是非数字字符），需要解决如何检测组合键并允许这类操作。

解决方案 #

修改handleContentEditable中的判断逻辑，排除必要的快捷键和控制键操作：

const handleContentEditable = (e) => {
    e.persist();
    let tmp = { ...values };
    let name = e.target.dataset.name;
    let type = e.target.dataset.type;
    let value = e.target.innerHTML.replace(/(<br[^>]>|<br>|&nbsp;|\n|\r|\t)+/gi, "");
    
    if (type === 'numeric') {
        // 兼容Windows的Ctrl键和Mac的Command键
        const isModPressed = e.ctrlKey || e.metaKey;
        // 允许的快捷键按键
        const allowedShortcutKeys = ['a', 'c', 'v', 'x'];
        const pressedKey = String.fromCharCode(e.nativeEvent.which).toLowerCase();
        
        // 放行Ctrl/Command+允许的快捷键、控制类按键
        if (isModPressed && allowedShortcutKeys.includes(pressedKey)) {
            // 不阻止操作
        } else if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
            // 不阻止控制键
        } else if (isNaN(String.fromCharCode(e.nativeEvent.which))) {
            e.preventDefault();
        }
        
        value = e.target.innerHTML.replace(/\D/g,'');
    }
    
    dot.str(name, value, tmp);
    setValues(tmp);
}

逻辑说明 #

• 用e.ctrlKey和e.metaKey覆盖Windows和Mac系统的修饰键，确保快捷键兼容；
• 明确放行Ctrl+A（全选）、Ctrl+C（复制）、Ctrl+V（粘贴）、Ctrl+X（剪切）这类高频操作；
• 允许退格、删除、方向键等控制类按键，保障基础编辑流畅性；
• 仅当输入非数字字符且不在允许操作列表内时，才阻止默认行为。

内容的提问来源于stack exchange，提问作者ipenguin67