javascript - 如何让我的 .js 文件在 React 中呈现 .html 文件?
问题描述
我一直在尝试在我的网站上实现一个 S3 存储桶,以将上传的图像存储到亚马逊的云中。为此,需要一些 HTML 样板。我制作了一个 HTML 文件并复制了样板文件,现在想在我的 .js 文件中使用它,其中包含我希望显示此信息的网页。
这是 HTML 文件:
<html>
<body>
<h1>Edit your account</h1>
<hr>
<h2>Your avatar</h2>
<input type="file" id="file-input">
<p id="status">Please select a file</p>
<img style="border:1px solid gray;width:300px;" id="preview" src="/images/default.png">
<h2>Your information</h2>
<form method="POST" action="/save-details">
<input type="hidden" id="avatar-url" name="avatar-url" value="/images/default.png">
<input type="text" name="username" placeholder="Username"><br>
<input type="text" name="full-name" placeholder="Full name"><br><br>
<hr>
<h2>Save changes</h2>
<input type="submit" value="Update profile">
</form>
<script>
/*
Function to carry out the actual PUT request to S3 using the signed request from the app.
*/
function uploadFile(file, signedRequest, url){
const xhr = new XMLHttpRequest();
xhr.open('PUT', signedRequest);
xhr.onreadystatechange = () => {
if(xhr.readyState === 4){
if(xhr.status === 200){
document.getElementById('preview').src = url;
document.getElementById('avatar-url').value = url;
}
else{
alert('Could not upload file.');
}
}
};
xhr.send(file);
}
/*
Function to get the temporary signed request from the app.
If request successful, continue to upload the file using this signed
request.
*/
function getSignedRequest(file){
const xhr = new XMLHttpRequest();
xhr.open('GET', `/sign-s3?file-name=${file.name}&file-type=${file.type}`);
xhr.onreadystatechange = () => {
if(xhr.readyState === 4){
if(xhr.status === 200){
const response = JSON.parse(xhr.responseText);
uploadFile(file, response.signedRequest, response.url);
}
else{
alert('Could not get signed URL.');
}
}
};
xhr.send();
}
/*
Function called when file input updated. If there is a file selected, then
start upload procedure by asking for a signed request from the app.
*/
function initUpload(){
const files = document.getElementById('file-input').files;
const file = files[0];
if(file == null){
return alert('No file selected.');
}
getSignedRequest(file);
}
/*
Bind listeners when the page loads.
*/
(() => {
document.getElementById('file-input').onchange = initUpload;
})();
</script>
<div id="root"></div>
</body>
这是 .js 文件:
import React, { useState } from "react";
import { Typography, Button, Form, message, Input, Icon } from "antd";
import FileUpload from "../../utils/FileUpload";
import FileUploadNew from "../../utils/fileUploadNew";
import ReactDOM from 'react-dom'
import Axios from "axios";
const { Title } = Typography;
const { TextArea } = Input;
const num = 20
const Continents = [
{ key: 1, value: "MLA" },
{ key: 2, value: "APA" },
];
function UploadProductPage(props) {
const [TitleValue, setTitleValue] = useState("");
const [SubjectValue, setSubjectValue] = useState("");
const [DescriptionValue, setDescriptionValue] = useState("");
const [PriceValue, setPriceValue] = useState(0);
const [ContinentValue, setContinentValue] = useState(1);
const [imageData, setImageData] = useState("");
const [Images, setImages] = useState("");
const onTitleChange = (event) => {
setTitleValue(event.currentTarget.value);
};
const onSubjectChange = (event) => {
setSubjectValue(event.currentTarget.value);
};
const onDescriptionChange = (event) => {
setDescriptionValue(event.currentTarget.value);
};
const onPriceChange = (event) => {
setPriceValue(event.currentTarget.value);
};
const onContinentsSelectChange = (event) => {
setContinentValue(event.currentTarget.value);
};
const updateImages = (newImages) => {
setImages(newImages);
};
const onSubmit = (event) => {
event.preventDefault();
if (
!TitleValue ||
!SubjectValue ||
!DescriptionValue ||
!PriceValue ||
!ContinentValue ||
!Images
) {
return alert("fill all the fields first!");
}
const variables = {
writer: props.user.userData._id,
title: TitleValue,
subject: SubjectValue,
description: DescriptionValue,
price: PriceValue,
images: Images,
continents: ContinentValue,
};
Axios.post("/api/product/uploadProduct", variables).then((response) => {
if (response.data.success) {
alert("Product Successfully Uploaded");
} else {
alert("Failed to upload Product");
}
});
};
const picData = (value) => {
setImages(value);
};
return (
<div style={{ maxWidth: "700px", margin: "2rem auto" }}>
<div style={{ textAlign: "center", marginBottom: "2rem" }}>
<Title level={2}> Upload Prompt</Title>
</div>
<Form onSubmit={onSubmit}>
{/* DropZone */}
{/* <FileUpload refreshFunction={updateImages} /> */}
{/* kamran's code */}
<FileUpload imagePath={picData} refreshFunction={updateImages} />
<br />
<br />
<label>Title</label>
<Input onChange={onTitleChange} value={TitleValue} />
<br />
<br />
<label>Subject</label>
<Input onChange={onSubjectChange} value={SubjectValue} />
<br />
<br />
<label>Description</label>
<TextArea onChange={onDescriptionChange} value={DescriptionValue} />
<br />
<br />
<label>Number of pages</label>
<Input onChange={onPriceChange} value={PriceValue} type="number" />
<br />
<br />
<label>Format</label>
<br>
</br>
<select onChange={onContinentsSelectChange} value={ContinentValue}>
{Continents.map((item) => (
<option key={item.key} value={item.key}>
{item.value}{" "}
</option>
))}
</select>
<br />
<br />
<Button onClick={onSubmit}>Submit</Button>
</Form>
</div>
);
}
export default UploadProductPage;
我一直在阅读并尝试使用 getdocumentbyID 但它不起作用。没有显示错误。任何帮助表示赞赏
解决方案
React 使绑定函数变得容易,而无需先选择然后将函数绑定到 DOM。
将你的函数放在你的 return 语句之上
const picData = (value) => {
setImages(value);
};
const uploadFile = (file, signedRequest, url) => {
const xhr = new XMLHttpRequest();
xhr.open('PUT', signedRequest);
xhr.onreadystatechange = () => {
if(xhr.readyState === 4){
if(xhr.status === 200){
document.getElementById('preview').src = url;
document.getElementById('avatar-url').value = url;
}
else{
alert('Could not upload file.');
}
}
};
xhr.send(file);
}
const getSignedRequest = (file) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', `/sign-s3?file-name=${file.name}&file-type=${file.type}`);
xhr.onreadystatechange = () => {
if(xhr.readyState === 4){
if(xhr.status === 200){
const response = JSON.parse(xhr.responseText);
uploadFile(file, response.signedRequest, response.url);
}
else{
alert('Could not get signed URL.');
}
}
};
xhr.send();
}
const initUpload = () => {
const files = document.getElementById('file-input').files;
const file = files[0];
if(file == null){
return alert('No file selected.');
}
getSignedRequest(file);
}
return (
...rest of code here
在代码的 DOM 部分中,将 onChange 添加到输入
<input type="file" id="file-input" onChange={initUpload}>
推荐阅读
- java - 我们可以同时从多个线程访问同一个实例的同步方法和非同步方法吗?
- linux-kernel - Unix 共享库和 VDSO 内存映射
- apache-spark - Spark 客户端模式 - YARN 为驱动程序分配一个容器?
- swift - Swift 选项 - 为什么 var a:Int?一个?= 4 返回零
- java - 在 mp3 文件中查找
- angular - Angular:如何导入 JitCompilerFactory?
- django - 外键的django值
- java - 我正在尝试使用图形并绘制一些矩形
- ios - swift 4.2 中的 JSON 解析
- java - Java 的 CLASSPATH 如何在 Mac 上使用?