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

如何解决是否可以向使用ReactJS制作的Todo应用添加编辑功能？

我已经成功创建了一个待办事项列表应用程序。 我的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>
    </>
  }
}

使用方法ListItem和handleChange在handleDeleteClick组件中创建

删除功能和标记为已读功能。>

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 功能，我无法确定它是否可行。

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

解决方法

我们可以在onEditItem项内创建一个TodoList方法，并将该方法传递给每个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方法，该方法将处理编辑按钮的click事件。

// 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>