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

Question

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

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

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 方法作为 prop 而不是定义的 editTodo。
3. 您确实将editingTodo 进一步向下传递给ToDoItem，但您没有在那里使用它const ToDoItem = ({todo, deleteTodo}) => ...
4. 铅笔图标上没有onClick 侦听器，因此不会发生任何事情。
5. 我不知道您打算如何进行编辑（带有表单的模态窗口，或用输入字段替换文本），无论哪种方式，底线是您需要使用 @ 触发您的铅笔 onClick 侦听器987654329@.

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