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>
    );
}

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

Answer 1

<块引用>

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

这正是您需要做的。然而：

editTodo 方法中没有逻辑。
ToDoList 组件接收 editingTodo 方法作为 prop 而不是定义的 editTodo。
您确实将 editingTodo 进一步传递给 ToDoItem，但您没有在那里使用它const ToDoItem = ({todo, deleteTodo}) => ...
您的铅笔图标上没有 onClick 侦听器，因此什么也不会发生。
我不知道您打算如何进行编辑（带表单的模态窗口，或用输入字段替换文本），无论哪种方式，底线是您需要使用 { 触发铅笔 onClick 侦听器{1}}。

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

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

1 个答案: