React开发中不操作DOM如何获取输入框id对应的value值

React中无需操作DOM获取输入值的标准实现为受控组件方案，通过组件状态托管输入框的值，具体实现如下：

• 引入useStateHook声明状态变量存储输入框内容
• 输入框绑定value属性为该状态变量，同时绑定onChange事件实时同步输入内容到状态
• 点击添加按钮时直接读取状态变量的值即可，无需任何DOM操作

import { useState } from 'react';

// 原tasks数组定义在函数内每次调用都会重置，可根据需求提升到父组件或用全局状态管理
const tasks = [];
function listItems(taskName) {
    tasks.push(taskName);
    console.log("Added " + taskName + " to the array!");
}

function CreateArea() {
    // 声明受控组件专属状态
    const [taskName, setTaskName] = useState('');

    const handleAddTask = () => {
        if (taskName.trim()) {
            listItems(taskName);
            // 添加完成后清空输入框
            setTaskName('');
        }
    }

    return (
        <div className="mainbox">
            <div className="inputdiv">
                <input 
                    type="text" 
                    placeholder="Enter Task..." 
                    className="textbox" 
                    id="taskName"
                    value={taskName}
                    onChange={(e) => setTaskName(e.target.value)}
                />
                <button className="button" onClick={handleAddTask}>+</button>
            </div>
        </div>
    );
}

补充说明：你之前收到的event弃用提示，通常是旧版本React中在异步回调里直接使用合成事件未调用e.persist()导致的，使用受控组件方案可以完全规避该问题。

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