получить значение из события onInput для cotentEditable в React

Question

У меня есть заголовок contentEditable, в котором я хочу получить значение для события onInput. До сих пор мне удалось получить event.target, но он возвращает весь узел DOM. Я хочу получить только фактическое значение заголовка. Полезные идеи высоко ценятся.

То, что я пробовал до сих пор:

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>