使用React和纯CSS构建一个简单的图像拖放功能，无需任何外部库。本教程将引导您完成创建这个功能的步骤。
步骤一：项目设置
首先，创建一个新的React项目。可以使用create-react-app：
1
npx create-react-app drag-and-drop
步骤二：基本结构
立即学习“前端免费学习笔记（深入）”；
替换App.js和App.css文件内容如下：
App.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import ./App.css;
import ImageContainer from ./ImageContainer;
function App() {
return (
<div className="App">
<h2 className="heading">选择图片：</h2>
<div className="image-area">
<ImageContainer />
</div>
</div>
);
}
export default App;
App.css:
1
2
3
4
5
6
7
8
9
10
.App {
text-align: center;
width: 100vw;
height: 100vh;
}
.heading {
font-size: 32px;
font-weight: 500;
}
步骤三：创建图像容器组件
创建一个名为ImageContainer.js的新文件，并添加以下代码：
ImageContainer.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React from react;
import ./ImageContainer.css;
const ImageContainer = () => {
const [url, setUrl] = React.useState();
const onChange = (e) => {
const files = e.target.files;
files.length > 0 && setUrl(URL.createObjectURL(files[0]));
};
return (
<div className="image-container">
{url ? (
@@##@@
) : (
<div className="upload-container">
<p>拖放图片到这里</p>
<p>或</p>
<p>点击选择</p>
<input type="file" className="input-file" onChange={onChange} />
</div>
)}
</div>
);
};
export default ImageContainer;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.image-container {
width: 60%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed rgba(0, 0, 0, 0.3);
}
.upload-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
}
.upload-container > p {
font-size: 18px;
margin: 4px;
font-weight: 500;
}
.input-file {
display: block;
border: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
.image-view {
max-width: 100%;
max-height: 100%;
}
步骤四：运行应用
在终端运行npm start启动应用程序。现在，您可以将图像拖放到容器中或点击“点击选择”按钮来选择图像。
本教程展示了如何使用React和纯CSS创建简单的图像拖放功能，无需额外依赖。 记住，这个例子只处理图像预览，并未实现真正的拖放移动功能。 要实现完整的拖放移动，需要使用JavaScript事件处理。
以上就是在 React 中使用 CSS 拖放图像的详细内容，更多请关注php中文网其它相关文章！