React模态框输入无法键入：交易更新功能故障求助

我尝试实现交易更新功能已有很长时间，但无法在输入框中键入内容。在StackOverflow上查看了多个类似问题，但都没有解决。使用了模态框，怀疑问题出在接收对象与操作对象不一致，但无法解决。请求告知处理方法及如何避免此类问题。

我的TransactionTable代码： #

interface Transaction {
  id: string;
  title: string;
  amount: number;
  type: string;
  category: string;
  createdAt: string;
}

export function TransactionsTable() {
  // ... 省略其他代码
  const [editingTransaction, setEditingTransaction] = useState<Transaction>()

  function onOpenUpdateTransactionModal(transaction: Transaction) {
    setEditingTransaction(transaction)
    setIsUpdateTransactionModalOpen(true)
  }

  return (
     // ... 省略其他代码
      <PencilSimple
                size={20}
                weight="fill"
                onClick={() => onOpenUpdateTransactionModal(transaction)}
       />
       // ... 省略其他代码
      <UpdateTransactionModal
        isOpen={isUpdateTransactionModalOpen}
        onRequestClose={onCloseUpdateTransactionModal}
        editingTransaction={editingTransaction}
      />
  )
}

我的UpdateTransactionModal代码： #

interface UpdateTransactionModalProps {
  isOpen: boolean;
  editingTransaction: Transaction | undefined;
  onRequestClose: () => void;
}

export function UpdateTransactionModal({ isOpen, onRequestClose, editingTransaction }: UpdateTransactionModalProps) {
   // ... 省略其他代码
  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    if(event.target.name === 'title') {
      setTitle(event.target.value)
    }
  }

   return(
      // ... 省略其他代码
     <S.Container onSubmit={handleUpdateTransaction}>

        <h2>Atualizar transação</h2>

        <input
          type="text"
          placeholder="Título"
          name="title"
          value={editingTransaction?.title}
          onChange={handleInputChange}
        />

        <input
          type="number"
          placeholder="Valor"
          value={editingTransaction?.amount}
          onChange={e => setTitle(e.target.value)}
        />

     </S.Container>
     // ... 省略其他代码
   )
}

问题原因及修复方案 #

核心问题 #

输入框无法输入的根本原因是受控组件的数据源不一致：

• 输入框的value绑定的是父组件传入的editingTransaction属性（props是只读的，无法直接修改）
• 但onChange事件却更新的是组件内部的title状态，导致输入框显示的值始终是props传入的初始值，无法跟随用户输入更新
• 金额输入框还存在低级错误：onChange里调用了setTitle，完全和字段不匹配

修复步骤 #

1. 在Modal内创建本地表单状态，初始化时从editingTransaction导入数据：

const [formData, setFormData] = useState<Transaction>({
  id: '',
  title: '',
  amount: 0,
  type: '',
  category: '',
  createdAt: ''
});

// 当editingTransaction变化时，同步到本地表单状态
useEffect(() => {
  if (editingTransaction) {
    setFormData(editingTransaction);
  }
}, [editingTransaction]);

2. 修改输入框的绑定逻辑，让value和onChange都指向本地的formData：

// 统一的输入变更处理函数
const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
  const { name, value } = event.target;
  setFormData(prev => ({
    ...prev,
    // 金额字段需要转成数字类型
    [name]: name === 'amount' ? Number(value) : value
  }));
};

// 标题输入框
<input
  type="text"
  placeholder="Título"
  name="title"
  value={formData.title}
  onChange={handleInputChange}
/>

// 金额输入框
<input
  type="number"
  placeholder="Valor"
  name="amount"
  value={formData.amount}
  onChange={handleInputChange}
/>

3. 提交时使用本地表单状态：在handleUpdateTransaction里，使用formData作为更新的数据源，提交后再关闭模态框并通知父组件更新列表。

避免此类问题的建议 #

• 受控组件保持数据源统一：所有输入框的value必须和onChange更新的是同一个状态，禁止跨数据源绑定
• 编辑场景使用本地状态：永远不要直接修改props，而是将props的值复制到组件内部状态后再操作
• 使用统一的表单状态对象：用一个对象管理所有表单字段，避免多个零散的状态变量，减少出错概率
• 关注控制台警告：React会对受控组件的不匹配情况发出警告，开发时及时查看并修复

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