I'm new to React Hooks. I am trying to make a small crud app, with add, edit, delete. I have some issues getting my edit function to work. When I click the edit, the input will add the values of the element that is clicked. But how do I update the item?
const [items, setItems] = useState<any>([]);
const [comment, setComment] = useState("");
const [amount, setAmount] = useState("");
const handleAddSubmit = (e: any) => {
e.preventDefault();
const newItem = {
id: new Date().getTime(),
comment: comment,
amount: amount,
preview: preview
}
setItems([...items].concat(newItem));
setFile(null);
setComment("");
setAmount("");
};
const editItem = (item: any) => {
setFile(undefined);
setComment(item.comment);
setAmount(item.amount);
};
const deleteItem = (id: any) => {
const updatedItems = [...items].filter((item) => item.id !== id);
setItems(updatedItems);
}
return (
<div>
{items.map((item: any, index: any) => {
return (
<div key={item.id}>
<div>{item.comment}</div>
<div>{item.amount} $</div>
<div onClick={() => editItem(item)}>Edit</div>
<div onClick={(e) => deleteItem(item.id)}>Delete</div>
</div>
);
})}
<input
value={comment}
onChange={(e) => setComment(e.target.value)}
placeholder="Comment"
/>
<input
value={amount}
onChange={(e) => setAmount(e.target.value)}
type="number"
/>
<button formAction="submit">Add</button>
</div>
)
You can use a map to go through each element of a list and create a new object for the item you want to update:
const editItem = (item) => {
setItems(items.map(i => i.id === item.id
? {...i, comment, amount}
: i);
setComment("");
setAmount("");
}
So acc to your code when you click on the edit button, this function gets triggered
const editItem = (item: any) => {
setFile(undefined);
setComment(item.comment);
setAmount(item.amount);
};
Now this function is updating the state and inside the input tags you are using the state as values, so this is the reason why you are getting the results you are getting
Now you can change your code to
const editItem = (item) => {
setItems(items.map(i => i.id === item.id ? {...i, comment, amount} : i);
setComment("");
setAmount("");
};
看起来您刚刚忘记向按钮添加 onclick 处理程序:
<button formAction="submit" onClick={handleAddSubmit}>Submit</Button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.