如何在沒有鈎子和 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!')並檢查一切是否正常。 作為下一步，您可以擔心在那里獲得真正的價值。