Я не могу получить доступ к внутреннему 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 из «реагировать-contenteditable»





Вам не нужна ссылка, используйте цель события (фактический элемент), чтобы получить значение, которое является 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"
/>
);
};
ContentEditableиз библиотеки? Если да, то какой?