使用react和ts写一个todolist(回车添加待办)并用dayjs显示事件创建时间

好的，以下是代码实现：

import React, { useState } from 'react';
import dayjs from 'dayjs';

interface TodoItem {
  content: string;
  createdAt: Date;
}

const TodoList: React.FC = () => {
  const [inputValue, setInputValue] = useState('');
  const [todoList, setTodoList] = useState<TodoItem[]>([]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      const newTodo = {
        content: inputValue,
        createdAt: new Date(),
      };
      setTodoList([...todoList, newTodo]);
      setInputValue('');
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        placeholder="Add new todo"
        value={inputValue}
        onChange={handleInputChange}
        onKeyDown={handleInputKeyDown}
      />
      <ul>
        {todoList.map((todo, index) => (
          <li key={index}>
            {todo.content}
            <span>{dayjs(todo.createdAt).format('YYYY-MM-DD HH:mm:ss')}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

首先定义了一个 `TodoItem` 接口表示待办事项的类型，包含内容和创建时间两个属性。

然后定义了一个 `TodoList` 组件，状态包括输入框的值和待办事项列表。输入框的值和列表都是用 `useState` 来管理的。

在输入框的值发生变化时，通过 `handleInputChange` 函数更新输入框的值。在按下回车键时，会创建一个新的待办事项对象，并将其添加到列表中。同时清空输入框的值。

在渲染列表时，使用 `map` 函数遍历列表中的每个待办事项，渲染出待办事项的内容和创建时间。创建时间使用 `dayjs` 库进行格式化。