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

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

crud jsx react-hooks reactjs javascript

Jonas · 技术社区 · 2 年前

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 回复 | 直到 2 年前

windowsill 2 年前

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

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

Mridul Gupta 2 年前

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

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("");
};

Colin Hale 2 年前

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

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

推荐文章

Minchan Jung · 当React中的文本内容更改时,如何更新div

2 年前

niksaexe · 在具有默认图片的情况下,使用onMouseEnter更改React中的img源

2 年前

Berendschot · 将条件类与静态类NextJS相结合

2 年前

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

2 年前

Brian Highforce Thomas · 未能在React中映射属性值。js和Typescript

2 年前

william007 · 使用useRef获取活动背景色

2 年前

jenzhng · 我如何让这个flex容器包装在React中?

2 年前

Demetris · 如何在音频播放器中传递React道具?

2 年前

Dylan L. · 为什么更新的状态没有返回到我的组件?

2 年前

twominds · 鼠标离开元素,鼠标进入另一个元素不会重置状态

2 年前