在 React.js 中使用 execCommand 時無法讀取未定義的屬性“contentDocument”

Question

我想在單擊按鈕時使選定的文本變為粗體。 我想使用 execCommand() function 但我不斷收到此錯誤：TypeError：無法讀取未定義的屬性“contentDocument”。

 import React, { useEffect } from 'react' import "./MainText.css" import "./App.css"; import FormatColorFillIcon from '@material-ui/icons/FormatColorFill'; import BorderColorIcon from '@material-ui/icons/BorderColor'; function MainText() { function enableEditMode() { const textpart = document.getElementsByName('textPart')[0]; const iframeDocument= textpart.contentDocument || textpart.contentWindow.document; iframeDocument.designMode = "on"; iframeDocument.contentEditable = true; } useEffect(() => { enableEditMode(); }, []) function execCmd(command) { const textpart = document.getElementsByName('textPart')[0]; const iframeDocument= textpart.contentDocument || textpart.contentWindow.document; iframeDocument.execCommand(command, false, null); } return ( <div className="mainText"> <button onClick={execCmd('bold')}><i class="fa fa-bold"></i></button> <div className="mainText__second"> <iframe name="textPart" frameBorder="0" ></iframe> </div> </div> )

請幫忙。

Answer 1

看起來這可能是因為您將調用execCmd() function 的結果分配給onClick屬性 - 而不是預期的實際 ZC1C425268E68385D1AB5074C17A94F4 表達式。 在這種情況下， execCmd('bold')表達式甚至在 DOM 實際有機會被掛載之前就被評估。

嘗試這樣的事情：

onClick={() => execCmd('bold')}