时间戳

首页 > 解决方案 > 在 react todo 应用中添加编辑 todo 功能并正确更新状态

reactjs - 在 react todo 应用中添加编辑 todo 功能并正确更新状态

问题描述

我有以下组件，它将一个待办事项添加到我的待办事项列表中。待办事项未显示在输入字段中，但我想如果单击按钮，我可以运行 onclick 功能，然后我可以编辑现有的待办事项。

这是我开始的，我只需要一些指导从这里去哪里。当我单击编辑待办事项按钮时，它会添加另一个项目，但不会编辑现有项目。我怀疑我没有按照我应该的那样编辑状态。

我的编辑待办事项功能：

editTodo = (title) => {
    console.log("Edit todo:" + title)
    const editTodo = {
      title:title,
      edited: false
    }
    this.setState({ todos: [
      ...this.state.todos, editTodo 
    ]
  });
  }

我的待办事项旁边的编辑按钮：

<button className="edit-btn" onClick={this.props.editTodo.bind(this, id)}>EDIT</button>

我的编辑待办事项组件

class EditTodo extends Component {
  state = {
    edited: false
  }

  onSubmit = (e) => {
    e.preventDefault();
    this.props.editTodo(this.state.title); 
    this.setState({ title: ''}); 
  }

  onChange = (e) =>
  this.setState({
    [e.target.name]: e.target.value  
  }
  );


  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input
          type="text"
          name="title"
          placeholder="Edit Your Todo"
          value={this.state.title}
          onChange={this.onChange}
        />
        <button
          type="submit">
          Edit
        </button>
      </form>
    )
  }
}

更新：

我做了一些更改，实现了一个假后端并再次查看了它，使用与删除功能相同的逻辑是有意义的，我如何更改以下内容来编辑我当前的待办事项：

这是我的删除待办事项功能

deleteTodo = (id) => {
    axios.delete(`http://localhost:3004/todos/${id}`)
    .then(res => this.setState({
      todos: [
        ...this.state.todos.filter(todo => 
          todo.id !== id 
        )]
    }));
  }
``

标签： reactjsaxios

解决方案

我最初遵循的方法不起作用。Ref 解决了我的问题，最终解决方案发布在这里：edit todo list state not pass correct in react with axios

推荐阅读