如何获取React中动态添加的输入元素的值？

你当前代码的核心问题是把JSX元素存在useState里，这是React的反模式。正确的思路是数据驱动视图：用state存储输入框的业务数据，而非渲染好的UI元素，这样获取所有数值会变得非常直观。

下面是修正后的完整实现：

import { useState } from 'react';

function ExpenseForm() {
  // 用数组存储每个费用项的数据，每个项包含描述和金额字段
  const [addedExpenses, setAddedExpenses] = useState([]);

  // 添加新的空费用项
  function addExpense() {
    setAddedExpenses(prevState => [...prevState, { description: '', amount: '' }]);
  }

  // 更新指定索引的费用项数据
  function handleInputChange(index, field, value) {
    setAddedExpenses(prevState => {
      const updatedExpenses = [...prevState];
      // 复制原对象并更新指定字段
      updatedExpenses[index] = { ...updatedExpenses[index], [field]: value };
      return updatedExpenses;
    });
  }

  // 获取所有输入的数值示例
  function getAllExpenseValues() {
    // 直接从state读取所有数据，已经和输入框同步
    console.log('所有费用数据：', addedExpenses);
    
    // 可选：过滤空值并将金额转为数字类型
    const validExpenses = addedExpenses
      .filter(item => item.description.trim() && item.amount.trim())
      .map(item => ({
        ...item,
        amount: Number(item.amount)
      }));
    console.log('格式化后的有效费用：', validExpenses);
  }

  return (
    <div>
      <button onClick={addExpense}>添加费用项</button>
      
      {/* 遍历state数据，动态渲染输入框 */}
      {addedExpenses.map((expense, index) => (
        <div key={index} className="new-expense">
          <input
            type="text"
            placeholder="费用描述"
            value={expense.description}
            onChange={(e) => handleInputChange(index, 'description', e.target.value)}
          />
          <input
            type="number"
            placeholder="金额"
            value={expense.amount}
            onChange={(e) => handleInputChange(index, 'amount', e.target.value)}
          />
        </div>
      ))}

      <button onClick={getAllExpenseValues}>获取所有数值</button>
    </div>
  );
}

export default ExpenseForm;

关键说明 #

• state存数据而非UI：addedExpenses存储的是纯数据对象，React根据这些数据渲染对应的输入框，这是React的核心设计思路。
• 受控组件：每个输入框都是受控组件，value绑定state对应字段，onChange触发state更新，保证输入框内容和state完全同步。
• 唯一key：遍历渲染元素时必须添加key，这里用索引是因为场景简单；如果有后端返回的唯一ID，优先用ID作为key。
• 获取数值：需要读取所有输入值时，直接访问addedExpenses即可，它已经包含了所有输入框的最新内容，还能按需做过滤、类型转换等处理。

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