Question

我正在制作待办事项列表，但在尝试创建编辑功能时遇到问题。除了编辑，它什么都做。有人可以帮忙吗？我已成功添加和删除，但只是编辑不起作用。

代码沙箱：

https://codesandbox.io/s/dawn-snowflake-nwdi3

const NewMenu = () => {
  const [recipeName, setRecipeName] = useState("");
  const [descriptionItem, setDescriptionItem] = useState("");
  const [items, setItems] = useState([
    { itemName: "Chicken", description: "chicken test", id: 0 }
  ]);

  const handleAddButtonClick = (e) => {
    e.preventDefault();
    const newItem = {
      itemName: recipeName, // change
      description: descriptionItem,
      id: items.length
    };
    console.log(newItem);
    const newItems = [...items, newItem];

    setItems((state) => {
      console.log(state);
      console.log(newItems);
      return newItems;
    });
  };

  const removeTodo = (id) => {
    console.log(id);
    setItems(items.filter((item) => item.id !== id));
  };

  console.log(descriptionItem);
  return (
    <div>
      <form>
        <input
          value={recipeName}
          onChange={(event) => setRecipeName(event.target.value)}
          className="add-item-input"
          placeholder="Add a recipe..."
        />

        <input
          value={descriptionItem}
          onChange={(event) => setDescriptionItem(event.target.value)}
          className="add-item-input"
          placeholder="Add a Description..."
        />

        <input type="submit" onClick={(e) => handleAddButtonClick(e)} />
      </form>

      {items.map((item, index) => (
        <div>
          Recipe: {item.itemName} Description: {item.description}
          <button onClick={() => removeTodo(item.id)}>Remove </button>{" "}
        </div>
      ))}
    </div>
  );
};

export default NewMenu;

Answer 1

import React, {
  useState
} from "react";

const NewMenu = () => {
  const [recipeName, setRecipeName] = useState("");
  const [recipeId, setRecipeId] = useState("");
  const [descriptionItem, setDescriptionItem] = useState("");
  const [items, setItems] = useState([{
    itemName: "Chicken",
    description: "chicken test",
    id: 0
  }]);

  const handleAddButtonClick = (e) => {
    e.preventDefault();

    if (recipeId) {
      const newItems = items.map((item) => {
        if (item.id === recipeId) {
          return {
            iitemNamed: recipeName,
            description: descriptionItem,
            id: recipeId
          };
        } else {
          return item;
        }
      });

      setItems(newItems);
      setRecipeName("");
      setDescriptionItem("");
      setRecipeId("");
    } else {
      const newItem = {
        itemName: recipeName, // change
        description: descriptionItem,
        id: items.length
      };
      console.log(newItem);
      const newItems = [...items, newItem];

      setItems((state) => {
        console.log(state);
        console.log(newItems);
        return newItems;
      });

      setRecipeName("");
      setDescriptionItem("");
      setRecipeId("");
    }
  };

  const removeTodo = (id) => {
    console.log(id);
    setItems(items.filter((item) => item.id !== id));
  };

  const editTodo = (editId) => {
    const {
      itemName,
      description,
      id
    } = items.find(
      (item) => item.id === editId
    );

    console.log("Edit", id);
    setRecipeName(itemName);
    setDescriptionItem(description);
    setRecipeId(id);
  };

  console.log(descriptionItem);
  return ( <
    div >
    <
    form >
    <
    input value = {
      recipeName
    }
    onChange = {
      (event) => setRecipeName(event.target.value)
    }
    className = "add-item-input"
    placeholder = "Add a recipe..." /
    >

    <
    input value = {
      descriptionItem
    }
    onChange = {
      (event) => setDescriptionItem(event.target.value)
    }
    className = "add-item-input"
    placeholder = "Add a Description..." /
    >

    <
    input type = "submit"
    onClick = {
      (e) => handleAddButtonClick(e)
    }
    /> <
    /form>

    {
      items.map((item, index) => ( <
        div >
        Recipe: {
          item.itemName
        }
        Description: {
          item.description
        } <
        button onClick = {
          () => removeTodo(item.id)
        } > Remove < /button>{" "} <
        button onClick = {
          () => editTodo(item.id)
        } > Edit < /button>{" "} <
        /div>
      ))
    } <
    /div>
  );
};

export default NewMenu;

Link to code sandbox:

Answer 2

在内容中创建另一个表单并使用“编辑”按钮触发它。


import React, { useState } from "react";

const NewMenu = () => {
  const [recipeName, setRecipeName] = useState("");
  const [descriptionItem, setDescriptionItem] = useState("");
  const [EditrecipeName, setEditrecipeName] = useState("");
  const [EditDescriptionItem, setEditDescriptionItem] = useState("");
  const [itemID, setItemID] = useState();
  const [items, setItems] = useState([
    { itemName: "Chicken", description: "chicken test", id: 0 }
  ]);
  const [editTodo, setEditTodo] = useState(false);

  const handleAddButtonClick = (e) => {
    e.preventDefault();
    const newItem = {
      itemName: recipeName, // change
      description: descriptionItem,
      id: items.length
    };
    console.log(newItem);
    const newItems = [...items, newItem];

    setItems((state) => {
      console.log(state);
      console.log(newItems);
      return newItems;
    });
  };

  const removeTodo = (id) => {
    console.log(id);
    setItems(items.filter((item) => item.id !== id));
  };

  const editTodoButtonTrigger = (id) => {
    setEditTodo(true);
    setItemID(id)
  }

  const editTodoFormSubmitHandler = (e) => {
    e.preventDefault();

    setItems(prevState => {
    return (
        prevState.map((each) => {
            if(each.id === itemID){
                console.log('inside prevstate');
                return {...each, itemName: EditrecipeName, description: EditDescriptionItem}
            } else {
                return each
            }
        })
        )
    })
    setEditTodo(false)
  }

  console.log(descriptionItem);
  return (
    <div>
      <form>
        <input
          value={recipeName}
          onChange={(event) => setRecipeName(event.target.value)}
          className="add-item-input"
          placeholder="Add a recipe..."
        />

        <input
          value={descriptionItem}
          onChange={(event) => setDescriptionItem(event.target.value)}
          className="add-item-input"
          placeholder="Add a Description..."
        />

        <input type="submit" onClick={(e) => handleAddButtonClick(e)} />
      </form>

      {
      items.map((item, index) => {
          return (
            <div>
            Recipe: {item.itemName} Description: {item.description} Index: {index}
            <button onClick={() => removeTodo(item.id)}>Remove </button>{" "}
            <button onClick={() => editTodoButtonTrigger(item.id)}> Edit </button>
            
            {editTodo && (index === itemID) 
            ?
            <form className="editTodoForm" onSubmit={editTodoFormSubmitHandler}>
            <input
                onChange={(event) => setEditrecipeName(event.target.value)}
                placeholder="Edit a recipe..."
            />

            <input
                onChange={(event) => setEditDescriptionItem(event.target.value)}
                placeholder="Edit a Description..."
            />

            <button type="submit" >Edit Complete</button>
            </form> 
            : 
            null
            }
            
            </div>
            )
        
        })
      }


      
    </div>
  );
};

export default NewMenu;

如何编辑待办事项列表？

2 个答案: