是否可以向使用 ReactJS 制作的 Todo 应用程序添加编辑功能？

Question

我在某种程度上成功地创建了一个待办事项列表应用程序。 我TodoList的构造函数如下：

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '',
      todoList: [{ id: 1, content: "Call Client" },
      { id: 2, content: "Write Log" }] }

      this.onChangeValue = this.onChangeValue.bind(this);
      this.onAddItem = this.onAddItem.bind(this);
  }

TodoList 的剩余主体具有添加项目功能，使用两种方法onChangeValue 和onAddItem

  onChangeValue = event => {
    this.setState({ value: event.target.value });
  };

  onAddItem = () => {
    if (this.state.value !== '') {
      this.setState(state => {
        const todoList = state.todoList.concat({ id: state.todoList.length + 1, content: this.state.value});
        return {
          todoList,
          value: '',
        };
      });
    }
  };

  render() {
    const listItems = this.state.todoList.map((todo) =>
      <ListItem key={todo.id} id={todo.id} content={todo.content}/>
    )
    return <>
      <ul className="todo-list">
        {listItems}
      </ul>
      {/* <AddItem/> */}
      <div className="add-item">
        <input type="text" onChange={this.onChangeValue}/>
        <button type="submit" onClick={this.onAddItem}>Add Item</button>
      </div>
    </>
  }
}

删除功能和标记为已读功能是使用handleChange和handleDeleteClick方法在ListItem组件中创建的。

class ListItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = { done : false, editing : '', deleted : false }

    this.handleChange = this.handleChange.bind(this);
    this.handleDeleteClick = this.handleDeleteClick.bind(this);
  }

  handleChange(event) {
    this.setState({done: event.target.checked})
  }

  handleDeleteClick() {
    this.setState({ deleted : true })
  }

  render() {
    if (this.state.deleted === false) {
      return <li className="list-item">
        {/* special class is added to the paragraph to strike the text when marked as done */}
        <p className={this.state.done ? 'done' : ''}>{this.props.content}</p>
        <ul className="actions">
          <li>
            <label htmlFor={'item_' + this.props.id}>Mark as done</label>
            <input name={'item_' + this.props.id} id={'item_' + this.props.id} type="checkbox" onChange={this.handleChange}/>
          </li>
          <li>
            {/* Edit button is disabled once the task is marked as done */}
            { this.state.done ? <button type="button" disabled>Edit</button> : <button type="button">Edit</button> }
          </li>
          <li><button type="button" onClick={this.handleDeleteClick}>Delete</button></li>
        </ul>
      </li>
    }
    else {
      return null;
    }
  }
}

现在唯一剩下的是 edit 功能，我不知道它是否可能。

我的应用程序的源代码可以在这个codepen中找到： https://codepen.io/blenderous/pen/rNeywyZ

Answer 1

我们可以在TodoList 项内创建一个onEditItem 方法，并将此方法传递给每个ListItem。此方法将接收 id 和 newContent 值来处理更新。

// TodoList component
...

onEditItem = (id, newContent) => {
  const newTodoList = this.state.todoList.map((todo) => {
    // return todo.id !== id ? todo : { ...todo, content: newContent }

    // not same id? leave as is
    if (todo.id !== id) {
      return todo;
    }

    // update content with the newContent value
    return { ...todo, content: newContent };
  });

  this.setState({ todoList: newTodoList });
};

然后在我们的ListItem 上，我们将创建一个handleEditClick 方法来处理我们的编辑按钮的点击事件。

// ListItem component
...

handleEditClick() {
  const { id, content } = this.props;

  // prompt to edit the current content
  const newContent = prompt("Edit:", content);

  // call the TodoList editTodo passing the id and the new content
  // of the current todo
  this.props.editTodo(id, newContent);
}

现在我们将像这样在编辑按钮上使用此方法

...

<button
  type="button"
  disabled={this.state.done} // disabled once the task is marked as done
  onClick={this.handleEditClick}
>
  Edit
</button>