在React with TypeScript中编辑列表的特殊元素,可以通过以下步骤实现:
以下是一个示例代码:
import React, { useState } from 'react';
interface ListItem {
id: number;
name: string;
age: number;
}
const EditableList: React.FC = () => {
const [list, setList] = useState<ListItem[]>([]);
const [editingItem, setEditingItem] = useState<ListItem | null>(null);
const handleEdit = (item: ListItem) => {
setEditingItem(item);
};
const handleSave = () => {
if (editingItem) {
const updatedList = list.map((item) =>
item.id === editingItem.id ? editingItem : item
);
setList(updatedList);
setEditingItem(null);
}
};
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setEditingItem((prevItem) => ({
...prevItem,
[name]: value,
}));
};
const renderList = () => {
return list.map((item) => (
<div key={item.id}>
<span>{item.name}</span>
<span>{item.age}</span>
<button onClick={() => handleEdit(item)}>Edit</button>
</div>
));
};
const renderEditingForm = () => {
if (!editingItem) return null;
return (
<div>
<input
type="text"
name="name"
value={editingItem.name}
onChange={handleInputChange}
/>
<input
type="number"
name="age"
value={editingItem.age}
onChange={handleInputChange}
/>
<button onClick={handleSave}>Save</button>
</div>
);
};
return (
<div>
{renderList()}
{renderEditingForm()}
</div>
);
};
export default EditableList;
这个示例代码实现了一个可编辑的列表组件。用户可以点击列表项旁边的编辑按钮,编辑对应列表项的名称和年龄。编辑表单中的输入框和保存按钮都与组件的状态绑定,当用户修改输入框的值时,组件的状态会更新,点击保存按钮时,更新对应列表项的值,并重新渲染列表。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云