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

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仅适用于 forms html 组件。 使用contentEditable允许您编辑标记的innerHtml 。 要访问实际内容，您可以运行：

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