Question

我有以下组件，可将待办事项添加到待办事项列表中。待办事项未显示在输入字段中，但我想如果单击按钮，则可以运行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 
        )]
    }));
  }
``

Answer 1

我最初遵循的方法无效。 Ref解决了我的问题，最终解决方案发布在这里：edit todo list state not passed correctly in react with axios

在React Todo应用中添加编辑待办事项功能并正确更新状态

1 个答案: