React中获取textarea的innerHTML为null，id/class/querySelector均无效求修复

问题根源 #

1. getElementById参数错误：你写的document.getElementById('.input_area')是错的，getElementById只需要传入纯ID字符串，不需要加.（.是querySelector的语法），所以这里获取到的是null。
2. 获取内容的属性错误：就算拿到了textarea的DOM元素，也应该用input.value而不是input.innerHTML——textarea作为表单输入元素，内容存在value属性里，innerHTML不是用来获取输入内容的。
3. React的最佳实践问题：React不推荐直接操作DOM，正确做法是用受控组件通过状态管理输入内容，这能避免DOM操作带来的各种同步问题。

临时修复（修正DOM操作） #

如果只是想快速解决当前报错，可以这样改：

import React from 'react'
import './Body.css';
import axios from "axios";

export default function Navbar() {
    let noteArray;
    
    const AddNote = () =>{
        // 修正ID参数，去掉.，并在事件触发时才获取DOM（组件顶层获取会因为未渲染拿到null）
        let input = document.getElementById('input_area');
        console.log("here", input.value); // 改用value获取内容
    }

    return (
        <>
            <div>
                <div className="input_info">
                    <textarea id='input_area' name="" cols="50" rows="5">op</textarea>
                    <br />
                    <button onClick={AddNote} className='add'>Add Note</button>
                </div>
                <br />
                <div id='display_info' >
                    
                </div>
            </div>
        </>
    )
}

推荐方案（React受控组件） #

这是React处理表单输入的标准方式，通过useState管理状态，完全避免DOM操作：

import React, { useState } from 'react'
import './Body.css';
import axios from "axios";

export default function Navbar() {
    let noteArray;
    // 用useState管理textarea内容，初始值设为默认的'op'
    const [noteContent, setNoteContent] = useState('op');

    const AddNote = () =>{
        console.log("here", noteContent); // 直接从状态获取内容，无需操作DOM
    }

    return (
        <>
            <div>
                <div className="input_info">
                    {/* 绑定value和onChange，让React完全掌控输入状态 */}
                    <textarea 
                        id='input_area' 
                        name="" 
                        cols="50" 
                        rows="5"
                        value={noteContent}
                        onChange={(e) => setNoteContent(e.target.value)}
                    />
                    <br />
                    <button onClick={AddNote} className='add'>Add Note</button>
                </div>
                <br />
                <div id='display_info' >
                    
                </div>
            </div>
        </>
    )
}

受控组件的优势：

• 让React完全同步输入状态，避免DOM和React状态不一致的问题
• 可以轻松实现实时输入验证、格式化等功能

内容的提问来源于stack exchange，提问作者Ankit