Реагировать на доступ к innerhtml с помощью ref

Я не могу получить доступ к внутреннему html моего элемента, используя refs. Ссылка на мой элемент выводится, но element.innerHTML выводится как undefined, почему?

const MyEditableComponent = ({ content }) => {
  const valueRef = useRef();

  const onContentChange = React.useCallback(evt => {
    const sanitizeConf = {
      allowedTags: ["b", "i", "a", "p"],
      allowedAttributes: {
        a: ["href"]
      }
    };
    const innerhtml = valueRef.current.innerHTML;
    console.info(valueRef.current)
    console.info(innerhtml)
    //setContent(sanitizeHtml(innerhtml, sanitizeConf))    
  }, [])

  return (
    <ContentEditable 
        ref = {valueRef}
        html = {content}//inner html
        onChange = {onContentChange}
        tagName = "div"             
        style = {{ overflowWrap: 'break-word', wordWrap: 'break-word', wordBreak: 'break-word', whiteSpace: 'pre-wrap', overflow: 'auto'
        }}
    />
  )
}

И можно ли написать это лучше?

ContentEditable из библиотеки? Если да, то какой?

adsy 23.04.2023 23:15

ContentEditable из «реагировать-contenteditable»

JohnnySmith88 23.04.2023 23:41
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам не нужна ссылка, используйте цель события (фактический элемент), чтобы получить значение, которое является HTML (песочницей):

const MyEditableComponent = ({ content }) => {
  const onContentChange = (evt) => {
    const html = evt.target.value;
    console.info({ html });
    //setContent(sanitizeHtml(html, sanitizeConf))
  };

  return (
    <ContentEditable
      html = {content} // innerHTML of the editable div
      onChange = {onContentChange} // handle innerHTML change
      tagName = "div"
    />
  );
};

Если вам нужна ссылка для получения html, установите ссылку, используя свойство innerRef. Набор реквизитов innerRef является ссылкой на фактический элемент DOM, и вы можете получить innerHTML из него (песочницы):

const MyEditableComponent = ({ content }) => {
  const valueRef = useRef();

  const onContentChange = () => {
    const html = valueRef.current.innerHTML;
    console.info({ html });
    //setContent(sanitizeHtml(html, sanitizeConf))
  };

  return (
    <ContentEditable
      innerRef = {valueRef}
      html = {content} // innerHTML of the editable div
      onChange = {onContentChange} // handle innerHTML change
      tagName = "div"
    />
  );
};

Другие вопросы по теме