---
name: Todo
route: /todo
order: 2
sidebar: true
---

import Todo from './';

# Todo Component

这是一个TodoList的示例，

1. 使用`ref`对基础数据类型做响应式定义。
2. 把响应式数据传递给子组件。

<Todo>Hi</Todo>

## Codes
```tsx
import React from 'react';
import { ref, reactive } from '@vue/reactivity';
import { setup } from '../../src/index';
import './index.css';
interface TodoItem {
  title: string;
  done: boolean;
}

const Todo: React.FC = setup(() => {
  const todos = reactive<TodoItem[]>([]);

  const inputValue = ref('');

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const title = inputValue.value;
    if (title) {
      todos.push({
        title,
        done: false,
      });
    }
    inputValue.value = '';
  };

  return props => {
    return (
      <>
        <form onSubmit={onSubmit}>
          <input
            value={inputValue.value}
            onChange={e => (inputValue.value = e.target.value)}
            placeholder="回车添加待办事项"
          />
        </form>

        <TodoUl todos={todos} />
      </>
    );
  };
});

const TodoUl: React.FC<{ todos: TodoItem[] }> = setup(() => {
  return ({ todos }) => {
    const onToggle = (todo: TodoItem) => (todo.done = !todo.done);
    return (
      <ul>
        {todos.map((todo, index) => {
          return (
            <li
              className={todo.done ? 'todo done' : 'todo'}
              onClick={() => onToggle(todo)}
              key={index}
            >
              {todo.title}
            </li>
          );
        })}
      </ul>
    );
  };
});

export default Todo;

```