javascript - 从 React 中 cotentEditable 的 onInput 事件获取值

Question

我有一个 contentEditable header ，我想在其中获取 onInput 上的值事件。到目前为止，我已经成功获得event.target但它返回整个 DOM 节点。我只想获取 header 的实际值。非常感谢有用的想法。

到目前为止我已经尝试过:

1. console.log(e.target.value) --> 返回 undefined

2. console.log(e.target) --> 返回节点<h5 contenteditable="true" style="margin: 0px;">Lesson 1</h5>

3. 我也想过将节点转换为字符串并使用reg ex提取值，但当console.log(e.target.toString())时我不得不放弃返回[object HTMLHeadingElement]

<h5 contentEditable style={{ margin: 0 }} onInput={e => {
          props.onChangeName(e.target.value)
          console.log(e.target)
      }}>
        {props.name}
</h5>

Answer 1

使用.value仅适用于表单html组件。使用 contentEditable 允许您编辑 innerHtml您的标记。要访问实际内容，您可以运行:

<h5 contentEditable style={{ margin: 0 }} onInput={e => {
      props.onChangeName(e.target.innerHTML);
      //or
      props.onChangeName(e.target.textContent);
  }}>
  {props.name}
</h5>