代码之家 › 专栏 › 技术社区 › Jonas

反应挂钩-编辑后更新列表中的项目

crud jsx react-hooks reactjs javascript

1

Jonas · 技术社区 · 3 年前

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>

)

3 回复 | 直到 3 年前

1

windowsill 3 年前

您可以使用映射遍历列表的每个元素,并为要更新的项目创建新对象:

const editItem = (item) => {
  setItems(items.map(i => i.id === item.id
    ? {...i, comment, amount}
    : i);
  setComment("");
  setAmount("");
}

2

0

Mridul Gupta 3 年前

因此,根据您的代码,当您单击编辑按钮时,会触发此功能

const editItem = (item: any) => {
    setFile(undefined);
    setComment(item.comment);
    setAmount(item.amount);
};

const editItem = (item) => {
     setItems(items.map(i => i.id === item.id ? {...i, comment, amount} : i);
    setComment("");
    setAmount("");
};

3

0

Colin Hale 3 年前

看起来您刚刚忘记将onclick处理程序添加到按钮:

  <button formAction="submit" onClick={handleAddSubmit}>Submit</Button>