如何在没有钩子和 redux 的待办事项列表中编辑待办事项

Question

几天来，我一直在阅读教程和文章，但无法弄清楚这一点。 每当我单击铅笔图标时，我都希望它编辑当前的操作。 我有 4 个组件，表单（我添加 todo 的搜索栏）、app.js、todoList 和一个 todo.js 组件。 我将所有 state 保留在应用程序中，并将 state 保留在表格中，以跟踪我输入的条款。

我想我需要在应用程序中创建一个 editTodo 方法并将其作为道具传递给列表，然后传递给 todoItem。 大多数教程或在线帮助使用钩子或 redux 但我首先学习香草 React。 我不是直接要求答案，而是在 todolist 中实现编辑 todo 项目的步骤或思考过程。 即使我的待办事项应用程序在我保存 state 的地方是否正确，我也不确定。 我可能会因为问而懈怠……但我不知道还能做什么。 这是我的代码..

class App extends React.Component {
  state = { 
    todos: []
  }
  
   addTodo = (todo) => {
      const newToDos = [...this.state.todos, todo];
      this.setState({
        todos: newToDos
      });
      
    };
  
    deleteTodo = (id) => {
      const updatedTodos = this.state.todos.filter((todo) => {
        return todo.id !== id;
      });

      this.setState({
        todos: updatedTodos
      });
    }

    editTodo = (id, newValue) => {
      
    }


  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col">
          <Form addTodo={this.addTodo} />
          </div>
            
        </div>
        <div className="row">
        <div className="col">
        <ToDoList 
          todos={this.state.todos} 
          deleteTodo={this.deleteTodo} 
          editingTodo={this.state.editingTodo}/>
        </div>
            
        </div>    
      </div>
      
    )
  }
}

export default App;

const ToDoList = ({todos, deleteTodo, editingTodo}) => {
    
    const renderedList = todos.map((todo, index) => {
        return (
            <ul className="list-group" key={todo.id}>
                <ToDoItem todo={todo} deleteTodo={deleteTodo} editingTodo={editingTodo}/>
            </ul>
            )
    });

    return (
        <div>
            {renderedList}
        </div>
        
    )
}

export default ToDoList;

const ToDoItem = ({todo, deleteTodo}) => {
    
    return (
        <div>
        <li style={{display: 'flex', justifyContent: 'space-between' }} className="list-group-item m-3">
            {todo.text}
            
            <span>
                <FontAwesomeIcon 
                    icon={faPencilAlt} 
                    style={{ cursor: 'pointer'}}   
                />
                <FontAwesomeIcon 
                    icon={faTrash} 
                    style={{ marginLeft: '10px', cursor: 'pointer'}}
                    onClick={ () => deleteTodo(todo.id)}   
                />
            </span>
                                    
        </li>
        </div>
    );
}

export default ToDoItem;

我不认为表单组件与此处相关，因为我正在尝试编辑待办事项项目，因此不会在此处包含它。 如果我确实需要包含它，请告诉我。 看起来我似乎没有尝试实现此功能，但要么我找不到我正在寻找的东西、理解代码，要么就是不知道如何实现它。

更新：

我在表单组件中添加了一个 isEditing 字段到我的待办事项中，这样也许它可以帮助我知道一个项目是否正在编辑。 我还重做了 editTodo 方法。

class Form extends React.Component {
    state = { term: ''};

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.addTodo({
            id: shortid.generate(),
            text: this.state.term,
            isEditing: false
        });

        this.setState({
            term: ''
        });
    }

editTodo = (id, newValue) => {
      const editedTodos = [...this.state.todos].map((todo) => {
        if(todo.id === id) {
          todo.isEditing = true;
          todo.text = newValue;
        }
        return todo.text;     
      });

      this.setState({
        todos: [...this.state.todos, editedTodos]
      });
    }
     
    

我还将该方法传递给 todoList，然后像这样传递给 todoItem

const ToDoItem = ({todo, deleteTodo, editTodo}) => {
    const renderContent = () => {
        if(todo.isEditing) {
            return <input type='text' />
        } else {
            return <span>
                <FontAwesomeIcon 
                    icon={faPencilAlt} 
                    style={{ cursor: 'pointer'}}
                    onClick={ () => editTodo(todo.id, 'new value')}   
                />
                <FontAwesomeIcon 
                    icon={faTrash} 
                    style={{ marginLeft: '10px', cursor: 'pointer'}}
                    onClick={ () => deleteTodo(todo.id)}   
                />
                </span>
            }     
        }
    
    return (
            <div>
              <li style={{display: 'flex', justifyContent: 'space between'}} className="list-group-item m-3">
                {{!todo.isEditing ? todo.text : ''}}
                {renderContent()}
              </li>
           </div>
    );
}

因此，每当我单击编辑图标时，它都会成功显示“新值”，但现在还添加了一个额外的空白待办事项。 我想出了如何添加输入字段以便它也显示。 我接受 Brian 提供的答案，因为它在很多方面都是最有帮助的，但还没有完成编辑待办事项的功能。

Answer 1

我想我需要在应用程序中创建一个 editTodo 方法并将其作为道具传递给列表，然后传递给 todoItem。

这正是您需要做的。 但是：

1. editTodo方法中没有任何逻辑。
2. ToDoList组件接收editingTodo方法作为道具，而不是定义的editTodo 。
3. 您确实将editingTodo进一步向下传递给ToDoItem ，但您没有在那里使用它const ToDoItem = ({todo, deleteTodo}) =>...
4. 您在铅笔图标上没有onClick侦听器，因此不会发生任何事情。
5. 我不知道您打算如何进行编辑（模态 window 用表单，或用输入字段替换文本），不管怎样，底线是您需要用() => editTodo(id, newText)触发您的铅笔 onClick 监听器() => editTodo(id, newText) 。

我的建议是 - 解决以上所有 5 点，现在只需硬编码新值，只是为了测试它： () => editTodo(id, 'updated value!')并检查一切是否正常。 作为下一步，您可以担心在那里获得真正的价值。