使用react和typescript通过mobx更新待办事项列表

npm install react react-dom mobx mobx-react-lite mobx-react typescript

yarn add react react-dom mobx mobx-react-lite mobx-react typescript

import React from 'react';
import { observer } from 'mobx-react-lite';
import { useStore } from './store';

const TodoList: React.FC = observer(() => {
  const todoStore = useStore();

  const handleToggle = (id: string) => {
    todoStore.toggleTodo(id);
  };

  return (
    <div>
      <ul>
        {todoStore.todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => handleToggle(todo.id)}
            />
            <span>{todo.text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
});

export default TodoList;

import { makeAutoObservable } from 'mobx';

class TodoStore {
  todos: Todo[] = [];

  constructor() {
    makeAutoObservable(this);
  }

  addTodo(text: string) {
    const newTodo: Todo = {
      id: Date.now().toString(),
      text,
      completed: false,
    };

    this.todos.push(newTodo);
  }

  toggleTodo(id: string) {
    const todo = this.todos.find((todo) => todo.id === id);
    if (todo) {
      todo.completed = !todo.completed;
    }
  }
}

export const useStore = () => {
  const store = new TodoStore();
  return store;
};

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(
  <React.StrictMode>
    <TodoList />
  </React.StrictMode>,
  document.getElementById('root')
);