javascript - Uncaught ReferenceError : txtNoteRef is not defined - useRef - reactJS

Question

我正在尝试创建简单的 React js 应用程序，下面是我的代码片段(Notes.tsx 文件)

import React, { createRef, useRef } from 'react';
function NotesEditor(props: any) {
    const txtNoteRef = useRef<HTMLInputElement>(null);
    return (
        <div className={"row"}>
            <div className="col-md-6">
                <div className="form-group">
                    <input type="text" ref={txtNoteRef} id="txtNote" className="form-control"></input>
                </div>
            </div>
            <div className="col-md-6">
                <input type="button" className="btn btn-primary" value="Save Note" onClick={handleSaveNote}></input>
            </div>
        </div>
    );
    function handleSaveNote(event: any) {
        debugger
    }
}
export default NotesEditor;

谁能解释一下为什么我在方法 handleSaveNote() 中尝试访问它时出现错误 Uncaught ReferenceError: txtNoteRef is not defined 或者我如何使用 useref 正确吗？下面是错误的屏幕截图。

Answer 1

我能够通过更改行 const txtNoteRef = useRef<HTMLInputElement>(null); 来解决此错误至 const txtNoteRef = useRef<any>();它奏效了!!!

import React, { createRef, useRef } from 'react';
function NotesEditor(props: any) {
const txtNoteRef = useRef<any>();
return (
    <div className={"row"}>
        <div className="col-md-6">
            <div className="form-group">
                <input type="text" ref={txtNoteRef} id="txtNote" className="form-control"></input>
            </div>
        </div>
        <div className="col-md-6">
            <input type="button" className="btn btn-primary" value="Save Note" onClick={handleSaveNote}></input>
        </div>
    </div>
);
    function handleSaveNote(event: any) {
        debugger
    }
}
export default NotesEditor;