```jsx
// APP.js
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import Video from './Video';
import Menu from './Menu';
const VIDEOS = {
fast: 'https://content.codecademy.com/courses/React/react_video-fast.mp4',
slow: 'https://content.codecademy.com/courses/React/react_video-slow.mp4',
cute: 'https://content.codecademy.com/courses/React/react_video-cute.mp4',
eek: 'https://content.codecademy.com/courses/React/react_video-eek.mp4'
};
function App() {
const [src, setSrc] = useState(VIDEOS.fast); //src的初始状态是fast
// 给4个按钮点击事件处理
const clickHandler = (event) => {
const name = event.target.value;
setSrc(VIDEOS[name]);
}
return (
<div>
<h1>Video Player</h1>
<Menu onSelectVideo={clickHandler}/> //Menu.js的props
<Video src={src}/> ////Video.js的props
</div>
);
};
const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App />);
```
```js
// Menu.js
import React from "react";
function Menu({onSelectVideo}) {
return (
<form onClick={onSelectVideo}>
<input type="radio" name="src" value="fast"/> fast
<input type="radio" name="src" value="slow" /> slow
<input type="radio" name="src" value="cute" /> cute
<input type="radio" name="src" value="eek" /> eek
</form>
);
};
export default Menu;
```
```js
// Video.js
import React from "react";
function Video({src}) {
return (
<div>
<video src={src} controls autostart autoPlay muted/>
</div>
);
};
export default Video;
```
- [Video Player 视频播放器](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-stateless-components-from-stateful-components-4e9c9fb5-0711-4b6d-82b5-1719f044b355/projects/video-player)