<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私人练习</title>
<script src="./libs/babel.min.js"></script>
<script src="./libs/react.development.js"></script>
<script src="./libs/react-dom.development.js"></script>
<style>
img {
width: 200px;
}
iframe {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const App = () => {
const [videos, setVideos] = React.useState([])
const [video, setVideo] = React.useState({})
const [url, setUrl] = React.useState('')
const handlechange = (e) => {
let obj = {}
obj[e.target.dataset.id] = e.target.value
setVideo({
...video,
...obj
})
}
const add = () => {
let bb = videos
bb.push(video)
setVideos([...bb])
}
const toplay = (url) => {
setUrl(url)
}
return (
<div>
<input type="text" onChange={handlechange} data-id="title" />
<input type="text" onChange={handlechange} data-id="pic" />
<input type="text" onChange={handlechange} data-id="url" placeholder="在此添加视频链接" />
<button onClick={add}>添加</button>
<table >
<thead>
<tr>
<th>序列</th>
<th>名</th>
<th>图</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{
videos.map((item, index) => {
return (
<tr key={index}>
<th>{index + 1}</th>
<th>{item.title}</th>
<th>{item.pic}</th>
<th>
<button onClick={() => toplay(item.url)}>播放</button>
</th>
</tr>
)
})
}
</tbody>
</table>
<iframe src={"http://jx.618g.com/?url=" + url} ></iframe>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('app'))
</script>
</body>
</html>
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
