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

Question

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

到目前为止我尝试过的：

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

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

3. 我也想过将节点转成字符串，然后用reg ex提取值，但是当console.log(e.target.toString()) return [object HTMLHeadingElement][=时我不得不放弃19=]

<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>