无法使用 contentEditable 元素访问 `e.target` 中的属性

Question

我的 React 应用程序中有一个

h1

元素，我计划将其与

contentEditable

属性一起使用，以允许用户直接编辑它。问题出在我用来管理所有其他输入的

useFormValues

钩子内，我们无法像使用标准输入那样访问

e.target.name

或

e.target.value

属性。 [注意：请不要仅仅为了建议我坚持使用标准输入而发表评论，我已经权衡了利弊]。

当我记录以下内容时

console.log(Object.entries(e.target));

我得到这个数组：

第二个项目包含我的对象及其属性，但我想知道为什么这不是直接来自

e.target

。用

e.target.name

访问

e.target[1][1].name

感觉不正确且有风险。

相关代码如下，从这里的

h1

开始：

        <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);
  };

Answer 1

从文档中，事件：类型属性：

Event 接口的 type 只读属性返回包含事件类型的字符串。它是在构造事件时设置的，通常用于指代特定事件的名称，例如单击、加载或错误。

因此，在您的情况下，事件侦听器添加到

onInput

意味着事件的类型是

input

而不是

contenteditable

。您只需将

contenteditable

大小写更改为

input

，就可以了。