reactjs 内容可编辑抛出,无法读取react应用程序中未定义的属性(阅读“textContent”)

voase2hg  于 2023-02-12  发布在  React
关注(0)|答案(1)|浏览(104)

我试图从我的react应用程序的内容可编辑字段中输入文本内容,但出现以下错误;

Uncaught TypeError: Cannot read properties of undefined (reading 'textContent')
    at handleChangeCode (admin.js:53:1)
    at onInput (admin.js:157:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)


const [createCode, setCreateCode] = useState([{ value: null }]);

   function handleChangeCode(i, event) {
        const codeValues = [...createCode];
        codeValues[i].value = event.currentTarget.textContent;
        setCreateCode(codeValues);
        console.log(codeValues);
    }

        <div className='row'>
            {createCode.map((code, idx) => {
                  return (
                     <div key={`${code}-${idx}`} className="dCodeArea">
                        <button type="button" onClick={() => handleRemoveCode(idx)} 
                        className="closeElement">
                         X
                       </button>
                         <blockquote
                           type="text"
                           id="blogCode"
                           contenteditable='true'
                           className="codehighlight"
                           placeholder="Enter your code here"
                           value={code.value || ""}
                       onInput={e => handleChangeCode(idx, e.currentTarget.textContent)}
                         />
                         </div>
                     );
                 })}
          </div>
fdbelqdn

fdbelqdn1#

您期望event作为handleChangeCode的第二个参数,但您使用event.currentTarget.textContent调用它。
传递的字符串没有.currentTarget(=〉undefined),并且无法查询undefined的属性。
简而言之,用途:

<blockquote onInput={e => handleChangeCode(idx, e) />

相关问题