以下是一个简化的React、TypeScript、NodeJS和MongoDB搭建的Todo App前端自我介绍部分的代码示例：
import React, { useState } from 'react';
import { Button, Form } from 'react-bootstrap';
import { useHistory } from 'react-router-dom';
import { useAppDispatch } from '../app/hooks';
import { addUser } from '../features/user/userSlice';
export const Intro: React.FC = () => {
const [name, setName] = useState('');
const history = useHistory();
const dispatch = useAppDispatch();
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (name) {
dispatch(addUser({ name }));
history.push('/tasks');
}
};
return (
<div className="intro-container">
<h1>Welcome to Task Manager</h1>
<Form onSubmit={handleSubmit}>
<Form.Group>
<Form.Label>What's your name?</Form.Label>
<Form.Control
type="text"
placeholder="Enter your name"
onChange={(e) => setName(e.target.value)}
value={name}
required
/>
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</div>
);
};这段代码使用React Hooks和Bootstrap进行了简洁的重构，它展示了如何使用useState管理表单输入状态，使用useHistory进行路由跳转，以及如何通过Redux Toolkit中的useAppDispatch和addUser函数更新用户信息。这个示例代码简洁明了，并且遵循了现代React和TypeScript开发的最佳实践。