无法使用 React 输入输入字段

Question

我已经尝试了很长一段时间来实现更新我的事务的函数，但我不能在输入中键入。我在stackoverflow上看到了几个类似的问题，但没有帮助我，我使用模态，我相信问题是因为我正在接收一个对象，我试图操纵另一个。然而，我无法解决。有人能告诉我如何继续并解释一下如何避免这种情况吗?

我的<<p> strong> 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}
/>
)
}

我的<<p> strong> 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)}
/>
)
}
}

我省略了一大部分代码，因为我认为它不是解决方案的一部分，并且不想延长问题，但是如果你想看到整个代码，它在这里:

https://github.com/eltonsantos/eurorcamento

Answer 1

import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
import Modal from 'react-modal';
import incomeImg from '../../assets/income.svg';
import outcomeImg from '../../assets/outcome.svg';
import closeImg from '../../assets/close.svg';
import * as S from './styles';
import { useTransactions } from '../../hooks/useTransactions';
interface Transaction {
id: string;
title: string;
amount: number;
type: string;
category: string;
createdAt: string;
}
interface UpdateTransactionModalProps {
isOpen: boolean;
editingTransaction: Transaction | undefined;
onRequestClose: () => void;
}
export function UpdateTransactionModal({ isOpen, onRequestClose, 
editingTransaction }: UpdateTransactionModalProps) {
const { updateTransaction } = useTransactions()
const [transaction, setTransaction] = useState({
title: editingTransaction?.title,
amount: editingTransaction?.amount,
type: editingTransaction?.type,
category: editingTransaction?.category
})
useEffect(() => {
setTransaction({...transaction, title: editingTransaction?.title, 
amount: editingTransaction?.amount, type: editingTransaction?.type, 
category: editingTransaction?.category})
},[editingTransaction])
console.log(editingTransaction)
console.log(transaction);
async function handleUpdateTransaction(event: any) {
event.preventDefault();
console.log("UpdID" + editingTransaction)
// await updateTransaction()
//setEditingTransaction(editingTransaction)
}
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
setTransaction({...transaction, [e.target.name]: e.target.value});
}
return (
<Modal
isOpen={isOpen}
onRequestClose={onRequestClose}
overlayClassName="react-modal-overlay"
className="react-modal-content"
>
<button
type="button"
onClick={onRequestClose}
className="react-modal-close"
>
<img src={closeImg} alt="Fechar modal" />
</button>
<S.Container onSubmit={handleUpdateTransaction}>
<h2>Atualizar transação</h2>
<input
type="text"
placeholder="Título"
name="title"
value={transaction.title}
onChange={handleInputChange}
/>
<input
type="number"
placeholder="Valor"
value={transaction.amount}
onChange={handleInputChange}
/>
<S.TransactionTypeContainer>
<S.RadioBox
type="button"
isActive={transaction?.type === 'deposit'}
activeColor="green"
onClick={() => {setTransaction({...transaction, type: 'deposit'})}}
>
<img src={incomeImg} alt="Entrada" />
<span>Entrada</span>
</S.RadioBox>
<S.RadioBox
type="button"
isActive={transaction?.type === 'withdraw'}
activeColor="red"
onClick={() => {setTransaction({...transaction, type: 'withdraw'})}}
>
<img src={outcomeImg} alt="Saída" />
<span>Saída</span>
</S.RadioBox>
</S.TransactionTypeContainer>
<input
type="text"
placeholder="Categoria"
value={editingTransaction?.category}
onChange={handleInputChange}
/>
<button type="submit">Atualizar</button>

</S.Container>
</Modal>

)}

这是更新后的updateTransactionModal代码。问题:

• 您正在将值从editingTransactions传递到输入值字段。这就是为什么value没有更新。
• 其次，您正在为所有字段设置setTitle。您可以为每个字段调用setTitle, setAmount等，或者您可以简单地创建一个事务对象并像上面的代码一样设置它们。
• 第三个问题:当组件第一次加载时，editTransaction的值未定义。它会在一秒后更新，一旦你在输入字段中使用状态值，就会导致空字段。为了解决这个问题，我们应用了一个useEffect，它使用更新后的editTransaction值来更新状态。但你需要检查为什么会发生这种情况，并避免这种情况。editTransaction应该作为道具传递到模型中，它应该在第一次加载时获得最新的值，不需要使用useEffect。希望我能解决。