reactjs - 修复 React JS 上的编辑功能很热门？

Question

我试过这个： https ://codesandbox.io/s/eager-fire-2639k

单击编辑按钮时，我可以将文本放入输入字段并进行编辑，然后按提交后，将文本添加到列表中作为新文本。但我只想编辑它，而不是再次添加为新的。我该如何解决？

标签： reactjs

Answer 1

输出：

这是另一个示例，其中 id 是动态生成的，以避免使用索引、标题、内容进行过滤，它也允许编辑标题以及帖子的内容。

以下是如何编辑、删除和更新功能的工作方式：

// delete function
deleteItem(id) {
    //console.log(textarea);
    const filteredItems = this.state.posts.filter((item) => item.id !== id);
    this.setState({
      posts: filteredItems
    });
  }

// function to get posts to be edited
  editPost(id) {
    const filterPosts = this.state.posts.filter((item) => item.id === id);
    console.log(filterPosts);
    this.setState({
      form: filterPosts[0]
    });
  }

// add new and edit existing posts

handleSubmit(event) {
    event.preventDefault();
    console.log(this.state.posts);
    let updateFlag = false;
    let updatedPosts = this.state.posts.map((post) => {
      if (post.id === this.state.form.id) {
        updateFlag = true;
        return {
          title: this.state.form.title,
          textarea: this.state.form.textarea,
          id: post.id
        };
      }
      return post;
    });

    if (!updateFlag) {
      this.setState((prevState) => {
        return {
          posts: [
            {
              ...prevState.form,
              ...{ id: Math.floor(Math.random() * 1000000) }
            },
            ...prevState.posts
          ],
          form: {
            title: "",
            textarea: ""
          }
        };
      });
    } else {
      this.setState(() => {
        return {
          posts: updatedPosts,
          form: {
            title: "",
            textarea: ""
          }
        };
      });
    }
  }